HTML5 HTML 요소 확장(2부) - 향상된 Form 요소는 주목할 가치가 있습니다_html5 튜토리얼 기술

HTML5의 강화된 요소 중 가장 주목할 만한 것은 폼 요소입니다. HTML5에서는 양식이 크게 개선되었으며 이전에 JavaScript 코딩이 필요했던 일부 기능을 이제 코딩 없이 쉽게 구현할 수 있습니다. 토론을 시작하기 전에 다음 사항에 유의해야 합니다.

HTML5에서 양식 컨트롤은 자신이 속한 하나 이상의 양식 외부에 있을 수 있습니다. 따라서 fieldset, label 및 input과 같은 양식 컨트롤에는 양식 컨트롤이 속한 양식을 식별하기 위해 양식 속성이 추가되었습니다.

HTML5 :

1. 양식 요소 자체에 autocomplete 및 novalidate라는 두 가지 새로운 속성이 추가됩니다. autocomplete 속성은 "드롭다운 제안 목록" 기능을 활성화하는 데 사용되고 novalidate 속성은 테스트 중에 유용할 수 있는 양식 유효성 검사 기능을 끄는 데 사용됩니다.

2. fieldset 요소는 세 가지 새로운 속성(disable, name 및 form)을 추가합니다. 비활성화 속성은 필드세트를 비활성화하는 데 사용되고, name 속성은 필드세트의 이름을 설정하는 데 사용되며, form 속성의 값은 앞서 언급한 것처럼 필드세트가 속한 하나 이상의 폼의 ID입니다. fieldset가 양식 외부에 배치되는 경우 fieldset이 하나 이상의 양식과 올바르게 연결될 수 있도록 fieldset 태그의 양식 속성을 설정해야 합니다.

3. for 속성 외에 label 요소에는 form 속성만 추가됩니다. 여기서 언급할 가치가 있는 것은 for 속성인데, 이전에는 이 속성을 실제로 눈치채지 못했습니다. for 속성은 레이블에 첨부된 양식 컨트롤을 지정하는 데 사용되므로 레이블을 클릭하면 첨부된 양식 컨트롤에 초점이 맞춰집니다. 예:

코드 복사

코드는 다음과 같습니다.

<form action="demo_form.asp" id="form1">
< label for="name">나를 클릭하세요</label><input id="name" type="text"></input>
<input type="submit" value="Submit" />
</form> ;

"Click Me"를 클릭하면 다음 입력 상자가 활성화됩니다.

4. 입력 요소에는 양식의 유용성을 향상시키기 위해 몇 가지 새로운 유형과 속성이 도입되었습니다. 이러한 새로운 입력 유형은 데이터를 구성하고 분류하는 데 매우 유용하지만 안타깝게도 모든 유형을 제대로 지원하는 브라우저는 없습니다.
원래 버튼, 텍스트, 제출, 체크박스, 라디오, 선택, 비밀번호 유형 외에도 HTML5에는 다음과 같은 새로운 입력 유형이 추가되었습니다.

색상: 색상
다양한 날짜: 날짜, 날짜시간, 날짜시간-지역, 월, 주, 시간
이메일: 이메일
번호: 번호
범위: 범위
검색: 검색
전화 : tel
URL 유형: url

다음 예를 실행하여 다양한 브라우저의 지원을 확인할 수 있습니다.

코드 복사

코드는 다음과 같습니다. 다음과 같습니다:

<form action="demo_form.asp">
원하는 색상을 선택하세요: <input type="color" name="favcolor" />
생일: &lt ;input type="date" name="bday" />
생일(날짜 및 시간): <input type="datetime" name="bdaytime" />
생일( 날짜 및 시간) : <input type="datetime-local" name="bdaytime" />
생일(월 및 연도): <input type="month" name="bdaymonth" />
시간 선택: <input type="time" name="usr_time" />
주 선택: <input type="week" name="week_year" />
수량( between 1 and 5 ): <input type="number" name="quantity" min="1" max="5" />
수량(between 1 and 10): <input type="range " name=" points" min="1" max="10" />
Google 검색: <input type="search" name="googlesearch" />
전화: <입력 유형 ="tel" name="usrtel" />
홈페이지 추가: <input type="url" name="homepage" />
이메일: <input type="email" name="usremail " />
<input src="submitbutton.png" type="submit" />
</form>
다음은 새로 추가된 입력 속성입니다.
autocomplete: 이전에 입력한 정보를 "on" 또는 "off" 값을 사용하여 자동으로 표시합니다. 텍스트, 검색, URL, 전화, 이메일, 비밀번호, 날짜 선택기, 범위 및 색상 유형에 적용 가능합니다.

자동 초점: 페이지가 로드된 후 자동으로 초점을 얻습니다.
form: 입력이 속하는 형식을 지정합니다. 여러 개일 수 있습니다.
formaction: 양식이 제출된 후 이 입력을 처리할 페이지(URL) 또는 파일을 지정합니다. ​
formenctype: 양식이 제출된 후 데이터를 인코딩하는 방법을 지정합니다.
formmethod: 양식 데이터를 전송하기 위한 HTTP 방법을 지정합니다. 이 방법은 해당 양식의 HTTP 방법을 재정의합니다.
formnovalidate: 제출 전에 데이터의 유효성을 확인하지 않습니다.
formtarget: 양식이 제출된 후 응답 콘텐츠를 표시할 위치를 지정합니다.
높이, 너비: 입력란의 길이와 너비, 이미지 유형에만 적용 가능합니다. ​
max, min: 입력값의 최대값과 최소값입니다. 의미 있는 숫자, 범위 및 날짜 유형에 적합합니다. ​
다중: 여러 값을 입력할 수 있는지 여부로 이메일 및 파일 형식에 적용됩니다.
패턴: 텍스트, 검색, URL, 전화, 이메일, 비밀번호에 적합한 입력값을 확인하기 위한 정규식을 지정합니다.
자리 표시자: 입력하기 전에 정보를 묻는 메시지를 표시하며 텍스트, 검색, URL, 전화, 이메일, 비밀번호에 적용됩니다.
필수: 필수 항목인지 여부. 필수 항목이 작성되지 않은 경우 문자, 검색, URL, 전화, 이메일, 비밀번호, 날짜 선택기에 해당 양식을 제출할 수 없습니다. 번호, 확인란, 라디오 및 파일 형식.
step: 숫자, 범위, 날짜, 날짜/시간, 날짜/시간-로컬, 월, 시간, 주 유형에 적용 가능한 자동 성장을 위한 단계 값을 입력합니다.
list: datalist 요소와 함께 사용해야 하는 입력 항목의 후보 목록입니다. 목록 속성은 텍스트, 검색, URL, 전화, 이메일 등의 유형에 사용할 수 있습니다. 날짜, 숫자, 범위 및 색상은 FireFox에서 작동합니다. 간단한 예를 살펴보세요.

코드 복사

코드는 다음과 같습니다.

<legend> 즐겨찾기 </legend>
<p>
<label>
<input type="text" name="favorites" list= "옵션">
<datalist id="options">
<옵션 값="A">
<옵션 값="B">
<옵션 value="C" >
</datalist>
</label>
</p>
</fieldset>

다음 예제에서 각 속성을 사용하려고 하면 다른 브라우저에서 실행하여 실제 효과를 확인할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

<form action="demo_form.asp">
이메일: <input type="email" name="email" autocomplete="on" />
이미지 : <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"/>
1980-01-01 이전 날짜를 입력하세요:<input type="date" name="bday" max="1979-12-31">
2000-01-01 이후 날짜를 입력하세요: <input type="date" name="bday" min="2000-01-02">
수량(1~5 사이):<input type="number" name="Quantity" min= "1" max="5" />
이미지 선택: <input type="file" name="img" multiple="multiple" />
국가 코드: <input type=" text" name="country_code" 패턴="[A-Za-z]{3}" title="3자리 국가 코드" />
이름: <input type="text" name="fname " 자리 표시자="이름" />
사용자 이름: <input type="text" name="usrname" 필수="필수" />
숫자: <input type="number" name="points" step="3" />

<input type="submit" />
<입력 유형 ="submit" formaction="demo_admin.asp" value="관리자로 제출" />
<input type="submit" formenctype="multipart/form-data" value="Multipart/form으로 제출- data" />
<input type="submit" formmethod="post" formaction="demo_post.asp" value="POST를 사용하여 제출" />
<input type="submit" formnovalidate ="formnovalidate" value="검증 없이 제출" />
<input type="submit" formtarget="_blank" value="새 창으로 제출" />
</form>
<form action="demo_form.asp" id="form1">
이름: <input type="text" name="fname" />
<input type= "submit" value="Submit" />
</form>
성: <input type="text" name="lname" form="form1" />

建议：虽然并不是所有的浏览器本支持持器支持持是是鼓励大家使用这些new类型，因为即使浏览器不支持，只不过是会退化成简单的text输入框而已。

사용처:
W3C적 자원:http://www.w3schools.com/html5/default.asp
HTML5官方指导：http://dev.w3.org/html5/html-author/
相当不错的一个指导网站：http://html5doctor.com/
HTML5中文教程：http://www.html5china.com/
一个不错的前端博客：http://www.pjhome.net/default.asp?cateID= 1
JS操작작表单적상상关知识：http://www.cnblogs.com/xugang/archive/2010/08/12/1798005.html