[PHP] HTML FORM 태그에서 사용하는 input 태그 - file

141_PHP HTML FORM 태그에서 사용하는 input 태그 - file [요약] input 태그를 사용하며 type 속성의 값으로 file을 사용하여 서버에 파일을 전송하는 폼에 대해 알아보자. 웹 서비스를 이용하다보면 자신이 찍은 사진이나 문서 파일을 업로드한 경험이 있을 것이다. 파일을 업로드하는 폼을 만들려면 input 태그의 type 속성의 값으로 file을 사용한다. [type 속성값에 file을 적용하는 방법] 파일 업로드 폼을 만들때는 form 태그에 enctype 속성을 적용하고 값으로 multipart/form-data 를 사용한다. 작성하지 않으면 업로드한 파일의 이름(경로 포함)만 업로드되고 실제 파일은 업로드가 되지 않는다. [form 태그 enctype 속성에 multipa..

2022.10.11

[PHP] HTML FORM 태그에서 사용하는 input 태그 - url

138_PHP HTML FORM 태그에서 사용하는 input 태그 - url [요약] input 태그를 사용하며 type 속성의 값으로 url을 사용하여 사이트의 주소를 입력하는 폼을 생성하는 방법에 대해 알아보자. type 속성값이 url이면 url 입력폼이 된다. email과 마찬가지로 HTML5에서 새로 생긴 기느이며, 해당 폼에는 url주소의 규칙을 지킨 값만이 전송될 수 있다. 입력한 값이 url주소 유효성에 어긋나면 submit 버튼을 눌러도 값이 전송되지 않는다. 즉, 올바른 url값을 입력하지 않으면 전송 버튼을 눌러도 값을 검사하지 않는다. [type 속성값에 url을 적용하는 방법] 다음은 url 입력폼을 생성한 예제이다. [예제: 141_input_url.php ] 실행결과 초보자를 ..

2022.10.11

[PHP] HTML FORM 태그에서 사용하는 input 태그 - email

137_PHP HTML FORM 태그에서 사용하는 input 태그 - email [요약] input태그를 사용하며, type 송성의 값으로 email을 사용하여 이메일을 입력하는 폼을 생성하는 방법에 대해 알아보자. type 속성값이 email이면 email 입력 폼이 된다. HTML5에서 새로 생긴 기능이며, 해당 폼에는 이메일 주소의 규칙인 @(at)과 도메인이 있어야 한다. 입력한 값이 이메일 주소 유효성에 어긋나면 submit 버튼을 눌러도 값이 전송되지 않는다. 즉, 제대로된 이메일 값을 입력하지 않으면 전송 버튼을 눌러도 값을 검사하지 않는다. [type 속성값에 email을 적요하는 방법] 다음은 email 입력폼을 생성한 예제이다. [예제: 140_input_email.php ] 실행결과 ..

2022.10.11

[PHP] HTML FORM 태그에서 사용하는 input 태그 - submit

136_PHP HTML FORM 태그에서 사용하는 input 태그 - submit [요약] form 태그에서 입력한 정보를 서버로 전송하는 버튼 submit에 대해 알아보자. type 속성값이 submit이면 FORM 태그의 action 속성에 명시된 파일로 입력한 데이터를 전송하는 버튼이 생성된다. [type 속성값에 submit을 적용하는 방법] value 속성에 입력한 값은 submit 버튼 안에 표시되는 문구이다. 다음은 form 태그에 입력한 내용을 전송하는 버튼을 생성하는 예제이다. [예제: 139_input_submit.php ] 실행결과 실제 데이터 전송시에는 name, method, action 속성에 적합한 값을 입력해야 한다. 현재는 그렇지 않으므로 전송 버튼을 입력해도 존재하지 않는..

2022.10.10

[PHP] HTML FORM 태그에서 사용하는 input 태그 - radio

135_PHP HTML FORM 태그에서 사용하는 input 태그 - radio [요약] input 태그를 사용하며, type 속성의 값으로 radio를 사용하여 여러가지 보기 중 하나의 값을 선택하는 폼을 만드는 방법에 대해 알아보자. 라디오 버튼은 체크박스와 마찬가지로 나열된 보기를 선택하는 기능을 갖고 있다. 단, 체크박스는 복수 선택이 가능하지만, 라디오 버튼은 하나의 보기만 선택할 수 있다. [type 속성값에 radio를 적용하는 방법] 같은 항목에서 사용한다면 name값이 일치해야만 1개의 라디오 버튼을 선택할 수 있다. 다수의 선택지에서 1개만 선택하려면 다음과 같이 name을 일치시켜 주어야만 한다. 이부분은 checkbox와 동일하다. [type 속성값이 radio일 때 checked를..

2022.10.10

[PHP] HTML FORM 태그에서 사용하는 input 태그 - checkbox

134_PHP HTML FORM 태그에서 사용하는 input 태그 - checkbox [요약] input 태그를 사용하며, type 속성의 값으로 checkbox를 사용하여 여러가지 보기중에 다수의 값을 선택하는 폼을 만드는 방법에 대해 알아보자. type 속성의 값이 checkbox이면 여러 보기를 만들고 선택할 수 있다. 체크박스는 나열되어 있는 몇개의 단어중에서 여러 값을 선택할 때 사용하는데, value라는 속성을 사용한다. value 속성에는 실제 서버에 전송할 값을 입력한다. type 속성값이 text 또는 password이면 입력한 것 자체가 값이기 때문에 value 속성이 필요없었다. checkbox는 여러 값을 받기 위해 사용되므로 어떠한 체크박스를 선택했을때 그것이 체크되면 어떠한 값을..

2022.10.10

[PHP] HTML FORM 태그에서 사용하는 input 태그 - password

133_PHP HTML FORM 태그에서 사용하는 input 태그 - password [요약] FORM 태그 input 태그를 사용하며 type 속성의 값으로 password를 사용하여 비밀번호를 입력하는 텍스트 박스를 생상하는 방법에 대해 알아보자. type 속성의 값이 password 이면 비밀번호를 입력하는 입력 폼이 된다. 어떠한 문구를 입력하더라도 우리가 볼 수 없도록 특수 문자로 가려져 표시된다. [type 속성의 값으로 password를 적용하는 방법] 다음은 input 태그(type 속성의 값이 password)를 적용한 예제이다. [예제: 136_input-pw.php ] 실행결과 입력폼에 원하는 값을 입력하면 특수문자로 대신 표시됨을 알 수 있다. 초보자를 위한 PHP 200제 김태영 ..

2022.10.10

[PHP] HTML FORM 태그에서 사용하는 input 태그 - text

132_PHP HTML FORM 태그에서 사용하는 input 태그 - text [요약] HTML의 input 태그를 사용하며 type 속성의 값으로 text를 사용하여 짧은 문구를 입력하는 방법에 대해 알아보자. input 태그는 type의 값에 따라 다른 기능을 제공한다. [input 태그 사용 방법] type 속성은 값에 따라 ID 를 입력하는 입력 폼이 될 수 있고, 비밀번호 입력 폼이 될 수도 있다. name 속성은 이 입력 폼의 이름을 뜻하며, 서버사이드 언어(PHP)에서 이 값으로 입력된 데이터를 전달받을 수 있다. maxlength 속성은 이 입력 폼이 몇 글자까지 입력 가능하도록 할 것인지를 표시한다. 여러종류의 type 속성값을 하나씩 적용하며 알아보자. type 속성값이 text이면 짧..

2022.10.10

[JavaScript] 자바스크립트에서 슬라이더 값 변경 확인하기

168_자바스크립트에서 슬러이더 값 변경 확인하기 [적용] 슬라이더 상태 변경 시 작업을 처리하고 싶을 때 [문법] 이벤트 의미 input input 요소 변경 시 이벤트 change input 요소 변경 시 이벤트 [내용] 폼 요소 값의 변경은 input, change 이벤트로 감시할 수 있다. addEventListener()를 사용해 이벤트 핸들러를 설정한다. input 이벤트는 슬라이더가 움직일 때마다 발생하지만, change 이벤트는 조작이 끝난 산태에서만 발생한다. 이벤트 핸들러 내부 함수는 앞서 기술한 슬라이더 값 읽어오기 방법을 사용한다. https://stonefree.tistory.com/354 [JavaScript] 자바스크립트에서 슬라이더 값 읽어 오기 167_자바스크립트에서 슬라이..

2022.07.15

[JavaScript] 자바스크립트에서 텍스트 영역 값 변경 확인하기

157_자바스크립트에서 텍스트 영역 값 변경 확인하기 [적용] 텍스트 영역 변경 시 작업을 처리하고 싶을 때 [문법] 이벤트 의미 change 텍스트 영역 요소 변경 시 이벤트 input 텍스트 영역 요소 키 입력시 이벤트 [내용] 텍스트 영역 폼의 데이터 변경 여부는 change와 input 이벤트로 감시가 가능하다. addEventListener()를 사용해 이벤트 핸들러를 설정한다. 이벤트 핸들러 내부 함수는 앞서 기술한 텍스트 영역 값 읽어 오기 방법을 사용한다. input 이벤트는 키 입력 발생과 함께 발생하지만, change 이벤트는 일정 시간 지연 후 발생한다. HTML index.html JavaScript main.js // textarea 참조 const element = documen..

2022.07.13