### html Forms
Forms 기본
<form>: 사용자 입력을 위한 HTML 양식을 작성하는 데 사용된다.
action="", target="", method="" 을 사용할 수 있다.
<input> : 입력을 받기 위해 사용된다.
type=""
text : 한 줄 텍스트 입력 필드를 표시한다.
radio : 라디오 버튼을 표시한다.
submit : 양식을 제출하기 위한 버튼을 표시한다.
<form action="데이터를받을파일이름.php">
그외) button / checkbox / color / date / datetime-local /
email / file/ hidden / image / month / number /
password / radio / range / reset / search / tel / time /
url / week
속성
value="" : input의 초기 값을 지정한다.
readonly : 읽기 전용임을 지정한다.
disabled : 비활성화되는 필드를 지정한다.
size : 입력 필드의 보이는 폭을 지정한다(기본값20)
maxlength : 입력 필드에 허용되는 최대 문자 수를 지정한다.
min & max : 입력 필드의 최소, 최대값을 지정한다.
multiple : 입력 필드에 둘 이상의 값을 입력할 수 있도록 지적한다.
pattern : 입력 필드 값을 검사하는 정규식을 지정한다.
placeholder : 입력 필드의 예상 값을 설명하는 힌트를 짧게 지정한다.
required : 입력 필드에서 필수 입력값을 지정한다.
step : 입력 필드의 유효한 숫자 간격을 지정한다.
autofocus : 페이지가 로드 될 때 입력 필드가 자동으로 초점을 갖도록 지정한다.
height & width : image type의 높이와 너비를 지정한다.
list : <datalist><input> 요소에 대해 사전 정의 된 옵션이 포함 된 요소를 나타낸다.
autocomplete : 자동완성 기능을 지정한다. (on/off)
ex)
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
<lable>: lable 요소 내의 텍스트를 클릭해도 실행할 수 있다.
method=""
GET : 웹 주소(URL)에 데이터가 표시됨. 암호화x
POST : 웹 주소에 데이터가 표시되지 않음.
name 속성
name 이 없으면 필드에서 데이터를 전송할 수 없다.
Forms 요소
<select>: 드롭 다운 목록에서 선택 가능하다.
<option> 을 통해 선택할 수 있는 옵션 목록을 정의할 수 있다. (기본적으로 첫 번째 옵션 선택되어있음)
selected :다른 옵션이 미리 선택되어있게 할 수 있다.
밑에 fiat 옵션 부분 참조
size : 화면에 표시되는 값의 갯수를 지정 할 수 있다.
밑에 cars 부분 참조
multiple : 복수선택을 허용할 수 있다.
밑에 size 다음 부분 참조
ex)
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="갯수" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
<textarea> : 여러 줄을 입력할 수 있는 텍스트 필드를 정의한다.
rows : 텍스트 영역에 표시되는 줄 수를 지정한다.
cols : 텍스트 영역에 보이는 너비를 지정한다.
rows & cols ex)
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
width, height 의 CSS 를 사용하여 텍스트 영역을 지정할 수도 있다.
ex)
<textarea name="message" style="width:200px; height:600px;">
텍스트영역 안에 넣을 텍스트 입력
</textarea>
<button> : 클릭할 수 있는 버튼을 정의한다.
ex) <button type="button" onclick="alert('Hello World!')">Click Me!</button>
<fieldset> : 테두리로 필드를 나타낸다.
<legend> : 테두리 위에 제목이 나타난다.
ex)
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
<datalist> : 드롭다운과 입력 둘 다 가능하다.
ex)
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<output> : input 값에 따른 계산결과를 출력한다.
ex)
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<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>
<br><br>
<input type="submit">
</form>
form 속성
action
method
formenctype : 제출시 양식 데이터를 인코딩 하는 방법을 지정한다.(method가 POST일때만 해당)
formtarget : 양식을 제출 한 후 수신 된 응답을 표시할 위치를 나타내는 이름 또는 키워드를 지정한다.
formnovalidate : 제출시 input 요소의 유효성을 검사하지 않도록 지정한다.
novalidate : 제출시 모든 양식 데이터의 유효성을 검증하지 않도록 지정한다.
