5. HTML 입력 양식

# Form 요소

사용자로부터 입력을 받거나, 사용자가 입력한 데이터를 서버로 보낼 때에 form 요소를 사용

문법
<form action="처리할페이지주소" method="get|post"></form>

폼 핸들러(form-handler) : 전달받은 데이터를 처리하는 스크립트 파일 (서버 측의 웹 페이지)

action 속성 : 폼 핸들러의 주소를 명시
method 속성 : 입력받은 데이터를 서버에 전달할 방식을 명시
→ 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달

1. method 속성
method 속성을 통해 명시할 수 있는 form 요소의 전달 방식 → GET 방식 & POST 방식

방식	GET 방식	POST 방식
데이터 첨부	주소에 데이터(data)를 추가하여 전달하는 방식	데이터(data)를 별도로 첨부하여 전달하는 방식
데이터 노출	데이터가 주소 입력창에 그대로 나타남	데이터가 외부에 드러나지 않음
데이터 크기	전송할 수 있는 데이터의 크기가 제한적	전송할 수 있는 데이터의 크기가 제한이 없음
기타	크기가 작고 중요도가 낮은 정보를 보낼 때 (예: 검색 엔진의 쿼리(query))	보안성 및 활용성이 GET 방식보다 좋음

 

2. 다양한 타입의 input 요소
HTML에서는 다양한 타입의 input 요소를 사용하여 사용자로부터 입력을 받을 수 있음
→ HTML에서 사용할 수 있는 대표적인 input 요소의 타입

• 텍스트 입력(text)
• 비밀번호 입력(password)
• 라디오 버튼(radio)
• 체크박스(checkbox)
• 파일 선택(file)
• 선택 입력(select)
• 문장 입력(textarea)
• 버튼 입력(button)
• 전송 버튼(submit)
• 필드셋(fieldset)

 

3. 텍스트 입력
<input>태그의 type 속성값을 "text"로 설정 : 사용자로부터 한 줄의 텍스트를 입력받음

<form action="/examples/media/request.php">
    검색할 내용을 입력하세요 :
    <input type="text" name="search">
</form>

위의 예제처럼 form 요소 그 자체는 웹 페이지에 나타나지 않음
But form 요소에 포함된 다양한 input 요소를 통해 사용자의 입력을 받을 수 있음

 

4. 비밀번호 입력
<input>태그의 type 속성값을 "password"로 설정 : 사용자로부터 비밀번호를 입력받음
→ 화면에는 입력받은 문자나 숫자 대신 별표나 작은 원 모양이 표시

<form>
    사용자 : <br><input type="text" name="username"><br>
    비밀번호 : <br><input type="password" name="password">
</form>

 

5. 라디오 버튼
<input>태그의 type 속성값을 "radio"로 설정 : 사용자로부터 여러 개의 옵션(option) 중에서 단 하나의 옵션만을 입력받음
→ 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성이 같아야 함

<form>
    <input type="radio" name="lecture" value="html" checked> HTML <br>
    <input type="radio" name="lecture" value="css"> CSS <br>
    <input type="radio" name="lecture" value="java"> JAVA <br>
    <input type="radio" name="lecture" value="cpp"> C++
</form>

checked 속성 : 여러 개의 옵션 중에서 처음에 미리 선택되는 옵션을 지정 가능

 

6. 체크박스
<input>태그의 type 속성값을 "checkbox"로 설정 : 사용자로부터 여러 개의 옵션 중에서 다수의 옵션을 입력받을 수 있음
체크박스는 라디오 버튼과는 달리 여러 개의 옵션을 한 번에 입력받을 수 있음
→ 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성이 같아야 함

<form>
    <input type="checkbox" name="lecture" value="html" checked> HTML <br>
    <input type="checkbox" name="lecture" value="css"> CSS <br>
    <input type="checkbox" name="lecture" value="java"> JAVA <br>
    <input type="checkbox" name="lecture" value="cpp" disabled> C++
</form>

checked 속성 : 여러 개의 옵션 중에서 처음에 미리 선택되는 옵션을 지정 가능
disabled 속성 : 해당 옵션을 선택할 수 없게 설정 가능

 

7. 파일 선택
<input>태그의 type 속성값을 "file"로 설정 : 사용자로부터 파일을 전송받을 수 있음

<form>
    <input type="file" name="upload_file" accept="image/*">
</form>

accept 속성 : 입력받을 수 있는 파일의 확장자 및 종류를 명시 가능

 

8. 선택 입력
select 요소 : 여러 개의 옵션이 드롭다운 리스트(drop-down list) & 그중에서 단 하나의 옵션만을 입력받을 수 있음
option 요소 : 드롭다운 리스트에서 선택할 수 있는 각각의 옵션을 명시

<select name="fruit">
    <option value="apple"> 사과
    <option value="orange" selected> 귤
    <option value="strawberry"> 딸기
    <option value="peach"> 복숭아
</select>

selected 속성 : 드롭다운 리스트 중에서 처음에 미리 선택되는 옵션을 지정 가능

 

9. 문장 입력
textarea 요소 : 사용자로부터 여러 줄의 텍스트를 입력받을 수 있음

<textarea name="message" rows="5" cols="30">
    여기에 적으세요.
</textarea>

rows 속성, cols 속성 : textarea 요소의 크기를 자유롭게 지정 가능

 

10. 버튼
button 요소 : 사용자가 누를 수 있는 버튼을 나타냄

<button type="button" onclick="alert('버튼을 클릭하셨군요!')">
    버튼을 눌러주세요.
</button>

11. 전송 버튼
<input>태그의 type 속성값을 "submit"으로 설정

: 사용자로부터 입력받은 데이터(data)를 서버의 폼 핸들러로 제출하는 버튼을 만들 수 있음

<form action="/examples/media/request.php">
    어릴 때 자신의 별명을 적어주세요 : <br>
    <input type="text" name="nickname" value="별명"><br><br>
    <input type="submit" value="전송">
</form>

12. 필드셋(fieldset)
fieldset 요소 : form 요소와 관련된 데이터들을 하나로 묶어주는 역할
legend 요소 : fieldset 요소 안에서만 사용할 수 있음 + fieldset 요소의 제목

<form action="/examples/media/request.php">
    <fieldset>
        <legend>입력 양식</legend>
        이름 : <br>
        <input type="text" name="username"><br>
        이메일 : <br>
        <input type="text" name="email"><br><br>
        <input type="submit" value="전송">
    </fieldset>
</form>

13. HTML5에서 추가된 다양한 타입의 input 요소
1. datalist 요소
2. keygen 요소
3. output 요소

 

# Input 요소의 속성

1. value 속성
value 속성 : input 요소의 입력 필드(input field)에 나타나는 초깃값을 설정

<form>
    이름 : <br><input type="text" name="student_name"><br>
    학번 : <br><input type="text" name="student_id"><br>
    학과 : <br><input type="text" name="department" value="컴퓨터공학과"><br>
</form>

2. readonly 속성
readonly 속성 : 사용자가 입력 필드를 볼 수는 있으나, 수정할 수는 없도록 설정
disabled 속성과 다른 점 = 전송 버튼(submit)을 누르면 초깃값이 서버로 전송된다는 점

<form>
    이름 : <br><input type="text" name="student_name"><br>
    학번 : <br><input type="text" name="student_id"><br>
    학과 : <br><input type="text" name="department" value="컴퓨터공학과" readonly><br>
</form>

3. disabled 속성
disabled 속성 : 사용자가 입력 필드를 아예 사용할 수 없도록 설정
disabled 속성이 설정된 입력 필드는 사용/클릭할 수 없음
readonly 속성과 다른 점 = 전송 버튼(submit)을 눌러도 초깃값이 서버로 전송되지 않음

<form>
    이름 : <br><input type="text" name="student_name"><br>
    학번 : <br><input type="text" name="student_id"><br>
    학과 : <br><input type="text" name="department" value="컴퓨터공학과" disabled><br>
</form>

4. maxlength 속성
maxlength 속성 : 입력 필드에 입력할 수 있는 문자의 최대 길이(length)를 설정

<form>
    이름 : <br><input type="text" name="student_name" value="홍길동" maxlength="10"><br>
    학번 : <br><input type="text" name="student_id"><br>
</form>

 

5. size 속성
size 속성 : 입력 필드에 보여지는 input 요소의 크기(size)를 설정
maxlength 속성과는 달리 입력 필드가 한 번에 보여줄 수 있는 문자의 최대 개수만을 의미
→ 입력될 수 있는 문자의 최대 길이는 maxlength 속성값에 따라 달라지며, size 속성과는 전혀 무관

<form>
    이름 : <br><input type="text" name="student_name" value="홍길동" size="30"><br>
    학번 : <br><input type="text" name="student_id"><br>
</form>

6. HTML5에서 추가된 form 요소의 속성
autocomplete
novalidate

7. HTML5에서 추가된 input 요소의 속성

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (정규식)
placeholder
required
step