HTML5 폼(form)과 관련 엘리먼트
html5에서 form엘리먼트와 그외 관련된것 들을 살펴본다.변경과 새로 적용된 속성 엘리먼트를 살펴본다.
form
<form action="" autocomplete enctype=""
method="" name="" novalidate target="">
</form>
폐지된것은 없다 추가된것은 두가지이다.
autocomplete : 말그대로 자동완성 input엘리먼트에 입력한 값과 일치하는것이있다면 흔히 네이버같은 포탈 사이트에서 보듯이 일치하는값을 리스트로 표시한다.
novalidate : 폼을 전송할때 데이타의 적절성여부를 확인한다. 이속성을 사용하면 데이터를 체크하지않는다.
fieldset
<fieldset></fieldset>
폼을 필요에따라 그룹화 시킨다 달란진것없음.디폴트로는 박스로 border가만들어짐
legend
<legend></legend>
fieldset안에서 캡션(caption)과 같은역할.즉 폼에서 목적을 분명히 하기위해사용한다.
label
<label></label>
1)label안에 작성한경우
<p>
<label><input type="text" />어저고</label>
<label><input type="text" />어저고</label>
</p>
2)for엘리먼트로 id를지칭하고 관련시켜준다 이쪽을 추천
<p>
<label for="TEST">어저고</label>
<input id="TEST" type="text" />
</p>
button
<button></button>
새롭게 많이 생겨났는데. 각각 살펴볼필요없고
그전에 form엘리먼트 안에 button엘리먼트에서 별도로 기능이 수행 가능하게 되었다고
보면된다. 그리고 form보다 button엘리먼트 의 수행이먼저 처리된다.
다음은 form과 button에서의 동일 역할 수행의 속성 엘리먼트 비교이다.
action : Formaction
enctype : Formenctype
method : Formmethod
novalidate : Formnovalidate
target : Formtarget
button엘리먼트 의 속성엘리먼트는 Form만 붙여주면된다.
select,optgroup,option
<select>
<optgroup label="먼저">
<option value="1">A</option>
<option value="2">B</option>
...
</optgroup>
<optgroup label="후에">
...
</optgroup>
</select>
달라진점은 select에 autofocus가추가된점 문서가 로딩 되었을떄 엘리먼트에 커서가 위치하며
따라서 바로입력할수있다. 이것은 textarea,input, button에도 적용된다.
textarea
<textarea placeholder="" required ></textarea>
방명록, 댓글 등 흔히 텍스트를 남길 때 사용하한다.
placeholder는 겂을 입력할때 도움을 주는 힌트로 단어또는 짧은 문장을 사용한다
required 필수입력할때 사용한다.이속성이사용되면 반드시 입력해야 된다는 뜻이다.
댓글