HTML5 form 엘리먼트(element)와 form 관련 엘리먼트

웹표준/HTML5 훑어보기 2010.07.14 15:12

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 필수입력할때 사용한다.이속성이사용되면 반드시 입력해야 된다는 뜻이다.

저작자 표시
신고

설정

트랙백

댓글


티스토리 툴바