[HTML] HTML Form Elements

<form> element

: 사용자 입력을 수집하는데 사용되는 양식을 정의합니다. HTML form은 Form elements를 포함하고 있습니다. Form elements는 text fields, checkboxes, radio buttons, submit buttons 등과 같은 input elements와는 다른 type입니다. 

list of <form> attributes 

accept-charset : 제출된 form의 특정 문자세트를 지정합니다. (default : the page charset)

action : form을 제출할 url 지정합니다. (default : 제출 페이지)

autocomplete : 브라우저가 form 자동완성을 수행할지 여부를 지정합니다. (default : on)

enctype : 제출 된 데이터의 인코딩을 지정합니다. (default : ulr-encoded)

method : form을 제출할 때 사용되는 HTTP method를 지정합니다. (default : GET)

name : form을 식별하는데 사용되는 이름을 지정합니다. (DOM 사용 : document.forms.name)

novalidate : 브라우저가 form 유효성을 검사하지 않도록 지정합니다.

target : action 속성에 url을 지정합니다. (default : _self)

<input> element

: 가장 중요한 형태 요소입니다. 

<input type = "text"> : 텍스트 입력을 위한 한 줄 입력 필드를 정의합니다. 텍스트 필드의 기본 너비는 20입니다.

<input type = "radio"> : 라디어 버튼을 정의합니다. 라디오 버튼을 사용하여 제한된 수의 선택 항목 중 하나를 선택할 수 있습니다.

<input type = "submit"> : form 데이터를 form-handler에게 제출하기 위한 버튼을 정의합니다. 

form-handler 

: 일반적으로 입력 데이터를 처리하는 스크립트가 있는 서버페이지 입니다. form-handler는 form의 action 속성에 지정됩니다.

The Action Attribute 

: form을 제출할 때 수행 할 작업을 정의합니다. 일반적으로 form data는 사용자가 제출 버튼을 클릭할 때 서버의 페이지로 전송됩니다. action 속성이 생략된 경우, 작업은 현재 페이지로 설정됩니다. 

The Target Attribute : 제출된 결과가 새 브라우저 탭, 프레임에서 열거나 현재창에서 할 경우 속성을 지정합니다. 기본값('_self')은 현재 창에 제출됨을 의미, 새 브라우저 탭에서 양식 결과를 열려면 ('_blank')을 사용합니다.

The Method Attribute 

: 양식 데이터를 제출할 때 HTTP method ( GET or POST)를 지정합니다.

The Name Attribute 

: 각 입력 필드에는 제출할 name 속성이 있어야 합니다. 만약 name 속성이 없는 경우 해당 입력 된 필드의 데이터가 전혀 전송되지 않습니다.

<select> 요소 

: 드롭 다운 목록이고 기본적으로 첫번째 항목이 선택됩니다. 

- size : 표시값의 수를 지정하는 속성입니다. 

- multiple : 사용자가 하나 개의 값보다 더 선택할 수 있도록 하는 속성입니다.

<option> 요소 : 선택할 수 있는 옵션을 정의합니다. 

- selected :  미리 선택된 옵션을 정의하려면 "selected" 옵션을 추가합니다.

<select name="count">

<option value="1">one</option>

<option value="2">two</option>

<option value="3">three</option>

</select>

<textarea> 요소 

: 여러줄의 입력 필드 입니다.

-rows : 텍스트 영역이 보이는 선의 수를 지정하는 속성입니다.

-cols : 텍스트 영역의 가시 폭을 지정하는 속성입니다.  

-css : style을 사용하여 텍스트 영역의 크기를 정의할 수 있습니다. 

<button> 요소 

: 클릭할 수 있는 단추를 정의합니다.

>>> HTML5는 <datalist>, <output> 요소를 추가했습니다.

<datalist> 요소

: 미리 정의된 <option> 리스트를 <input>요소에서 지정합니다. 사용자는 데이터를 입력할 때 사전 정의 된 옵션의 드롭다운목록을 볼 수 있습니다. 

<form>

<input list="browsers">

<datalist id = "browsers">

<option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

<option value="Safari">

</form>

<output> 요소

: 계산결과를 나타낸다.

<form oninput = "x.value=parseInt(a.value)+parseInt(b.value)">

<input type="range" id="a" name="a" value="50">

100+

<input type="number" id="b" name="b" value="50">

=

<output name="x" for="a b"></output>

</form>

HTML Input Types

1.<input type="text" name="test">

2.<input type="password" name="psw">

3.<input type="submit" value="Submit"> 

: form-handler에 제출하기 위한 단추를 정의합니다.

4.<input type="reset"> 

: 모든 form data를 기본값으로 재설정 하는 버튼을 정의합니다. 

5.<input type="radio" name="gender" value="male" checked> 

: 라디오 버튼을 사용하여 제한된 수의 선택 사항 중 하나만 선택할 수 있습니다. 

6.<input type="checkbox" name="vehicle1" value="Bike">

: 체크박스를 사용하여 제한된 수의 선택 항목 중 0개 이상을 선택할 수 있습니다.

7.<input type="button">

>>>다음 항목들은 HTML5에서 추가한 입력유형들 입니다.

8.<input type="color">

9.<input type="date">/<input type="date" name="bday" max="1979-12-31">

: 브라우저 지원에 따라 날짜 선택 도구가 입력 필드에 나타날 수 있습니다. min/max 속성을 사용하여 날짜제한을 추가할 수 있습니다.

10.<input type="datetime-local">

: 시간대가 없는 날짜 및 시간 입력필드를 지정합니다. 브라우저 지원에 따라 날짜 선택 도구가 입력 필드에 나타날 수 있습니다.

11.<input type="email">

: 전자 메일 주소를 포함해야 입력필드에 사용됩니다. 브라우저 지원에 따라 전자 메일 주소를 제출할 때 자동으로 유효성을 검사할 수 있습니다.

12.<input type="file">

: 선택필드와 파일 업로드를 위한 "찾아보기"버튼을 정의합니다.

13.<input type="month">

: 사용자가 월 및 연도를 선택할 수 있습니다. 브라우저 지원에 따라 날짜 선택 도구가 입력 필드에 나타날 수 있습니다.

14.<input type="number"> 

: 숫자입력 필드입니다. min/max 속성을 사용하여 입력할 수 있는 숫자에 대한 제한을 설정할 수도 있습니다. 

15.<input type="range" name="points" min="0" max="10">

: 중요하지 않은 숫자를 입력하기 위한 제어를 정의합니다. min/max 속성을 사용하여 숫자에 제한을 설정 할 수 있으나 0에서 100사이 입니다.

16.<input type="search">

: 검색필드(일반 텍스트 필드처럼 동작)에 사용됩니다.

17.<input type="tel">

: 전화번호를 포함해야 입력필드에 사용됩니다. 현재 tel유형은 Safari 8에서만 지원됩니다.

18.<input type="time">

: 사용자가 시간대를 선택할 수 있습니다. 

19.<input type="url">

: url 주소를 포함해야 입력필드에 사용됩니다. 브라우저 지원에 따라 URL 필드는 제출될 때 자동적으로 유효성을 검사할 수 있습니다. 

20.<input type="week">

: 사용자가 주 및 연도를 선택할 수 있습니다. 브라우저 지원에 따라 날짜 선택 도구가 입력필드에 나타날 수 있습니다. 

HTML Input Attributes

1. value 

: 입력필드에 대한 초기 값을 지정합니다. 

2. readonly 

: 입력필드가 읽기전용입을 나타냅니다.

3. disabled 

: 입력필드가 비활성화되도록 지정합니다. 비활성화 된 입력란은 사용할 수 없고 클릭할 수도 없으며, form을 제출할 때 그 값은 전송되지 않습니다.

4. size

: 입력필드(문자) 크기를 지정합니다.

5. maxlength

: 입력필드의 최대 허용길이를 지정합니다. 

>>>다음 항목들은 HTML5에서 추가한 입력속성들 입니다.

5. autocomplete

: form 또는 입력필드의 자동완성을 설정 또는 해지속성을 정의합니다. 자동완성 기능이 켜지면 브라우저는 사용자가 이전에 입력한 값을 기반으로 입력값을 자동으로 완성합니다. <form>과 <input> : text, search, url, tel, email, password, datepickers, range and color에 작동합니다.

6. novalidate

: <form> 속성이다. form data를 제출할 때 유효성을 검사해서는 안됨을 지정합니다.

7. autofocus

: 페이지가 로드될 때 입력필드가 자동으로 포커스를 얻도록 지정합니다.

8. formaction

: form이 제출될 때 입력 컨트롤을 처리할 파일의 url을 지정합니다. formaction 속성은 <form>요소의 action 속성을 override하여 사용합니다. type="submit"/type="image" 속성과 함께 사용합니다.

9. formenctype

: form data를 제출할 때 인코딩 할 방법을 지정합니다. (method = "POST"인 경우에만 해당) type="submit"/type="image" 속성과 함께 사용합니다.

10. formmethod

: form data를 작업 url로 보내는 HTTP 메소드를 정의합니다. <form>요소의 method 속성을 override하여 사용합니다. type="submit"/type="image" 속성과 함께 사용합니다.

11. formnovalidate 

: <form>의 novalidate 속성보다 우위에 있습니다. type="submit"과 함께 사용할 수 있습니다.  

12. formtarget

: form 제출시 수신되는 응답을 표시하는 위치를 나타내는 키워드를 지정합니다. <form>요소의 target 속성을 override하여 사용합니다. type="submit"/type="image" 속성과 함께 사용합니다.

13. height/width

: type="image"  요소의 높이와 너비를 지정합니다. 항상 이미지의 크기를 지정해야 합니다. 브라우저가 크기를 모르는 경우 이미지가 로드되는 동안 페이지가 깜빡입니다.

14. list

: <datalist>의 <input> 요소에 대해 미리 정의된 옵션을 포함하는 요소를 참조합니다.

15. min/max 

: 수, 범위, 날짜, 날짜 로컬, 월, 시간, 주와 같은 입력유형에 사용합니다.

16. multiple

: 사용자가 <input>요소에 둘 이상의 값을 입력할 수 있도록 지정합니다. 전자메일 및 파일과 같은 입력 유형에서 작동합니다.

17. pattern

: <input>요소의 값이 검사되는 정규표현식을 지정합니다. 텍스트, 검색 , url, 전화, 이메일, 비밀번호 

<input type="text" name="country_code" pattern="[A-Za-z]{3}">

18. placeholder

: 입력필드의 예상 값 또는 힌트를 지정합니다. 이는 사용자가 값을 입력하기 전에 입력필드에 표시됩니다. 텍스트, 검색, url, 전화, 이메일, 비밀번호와 같은 입력유형에 작동합니다. 

19. required

: 입력필드 양식을 제출하기전에 채워져야 함을 지정합니다. 텍스트, 검색, url, 전화, 이메일, 비밀번호, 날짜 선택기, 숫자, 체크박스, 라디오, 파일과 같은 입력유형에 작동합니다. 

20. step

: <input>요소의 유효한 번호간격을 지정합니다. step 속성은 max/min 속성과 함께 사용하여 유효한 값 범위를 만들 수 있습니다. 숫자, 범위, 날짜  datetime-local, 월, 시간 및 주 입력 유형과 함께 작동합니다. 

출처 : https://www.w3schools.com/html/html_forms.asp