HTML5-웹 양식 2.0
Web Forms 2.0은 HTML4에있는 양식 기능의 확장입니다. HTML5의 양식 요소와 속성은 HTML4보다 더 높은 수준의 시맨틱 마크 업을 제공하며 HTML4에 필요한 많은 지루한 스크립팅 및 스타일링에서 해방됩니다.
HTML4의 <input> 요소
HTML4 입력 요소는 type 데이터 type.HTML4를 지정하는 속성은 다음 유형을 제공합니다-
| Sr. 아니. | 유형 및 설명 |
|---|---|
| 1 | text 명목상 줄 바꿈이없는 자유 형식 텍스트 필드입니다. |
| 2 | password 명목상 줄 바꿈이없는 민감한 정보를위한 자유 형식 텍스트 필드입니다. |
| 삼 | checkbox 미리 정의 된 목록에서 0 개 이상의 값 집합입니다. |
| 4 | radio 열거 된 값입니다. |
| 5 | submit 자유로운 형태의 버튼은 양식 제출을 시작합니다. |
| 6 | file MIME 유형 및 선택적으로 파일 이름이있는 임의의 파일. |
| 7 | image 특정 이미지의 크기에 상대적인 좌표로, 마지막으로 선택한 값이어야하고 양식 제출을 시작해야한다는 추가 의미가 있습니다. |
| 8 | hidden 일반적으로 사용자에게 표시되지 않는 임의의 문자열입니다. |
| 9 | select 라디오 유형과 매우 유사한 열거 된 값입니다. |
| 10 | textarea 명목상 줄 바꿈 제한이없는 자유 형식 텍스트 필드입니다. |
| 11 | button 버튼과 관련된 모든 이벤트를 시작할 수있는 자유로운 형태의 버튼입니다. |
다음은 레이블, 라디오 버튼 및 제출 버튼을 사용하는 간단한 예입니다.
...
<form action = "http://example.com/cgiscript.pl" method = "post">
<p>
<label for = "firstname">first name: </label>
<input type = "text" id = "firstname"><br />
<label for = "lastname">last name: </label>
<input type = "text" id = "lastname"><br />
<label for = "email">email: </label>
<input type = "text" id = "email"><br>
<input type = "radio" name = "sex" value = "male"> Male<br>
<input type = "radio" name = "sex" value = "female"> Female<br>
<input type = "submit" value = "send"> <input type = "reset">
</p>
</form>
...HTML5의 <input> 요소
위에서 언급 한 속성 외에도 HTML5 입력 요소는 type속성. 아래에 나열되어 있습니다.
NOTE − 최신 버전을 사용하여 다음 예제를 모두 시도해보십시오. Opera 브라우저.
| Sr. 아니. | 유형 및 설명 |
|---|---|
| 1 | 날짜 시간
시간대가 UTC로 설정된 ISO 8601에 따라 인코딩 된 날짜 및 시간 (년, 월, 일,시, 분, 초, 초 단위)입니다. |
| 2 | datetime-local
시간대 정보없이 ISO 8601에 따라 인코딩 된 날짜 및 시간 (년, 월, 일,시, 분, 초, 초 단위)입니다. |
| 삼 | 데이트
ISO 8601에 따라 인코딩 된 날짜 (년, 월, 일)입니다. |
| 4 | 달
ISO 8601에 따라 인코딩 된 연도와 월로 구성된 날짜입니다. |
| 5 | 주
ISO 8601에 따라 인코딩 된 연도와 주 번호로 구성된 날짜입니다. |
| 6 | 시각
ISO 8601에 따라 인코딩 된 시간 (시, 분, 초, 분수 초)입니다. |
| 7 | 번호
숫자 값만 허용합니다. step 속성은 정밀도를 지정하며 기본값은 1입니다. |
| 8 | 범위
범위 유형은 숫자 범위의 값을 포함해야하는 입력 필드에 사용됩니다. |
| 9 | 이메일
이메일 값만 허용합니다. 이 유형은 이메일 주소를 포함해야하는 입력 필드에 사용됩니다. 간단한 텍스트를 제출하려고하면 [email protected] 형식의 이메일 주소 만 입력해야합니다. |
| 10 | URL
URL 값만 허용합니다. 이 유형은 URL 주소를 포함해야하는 입력 필드에 사용됩니다. 간단한 텍스트를 제출하려고하면 http://www.example.com 형식 또는 http://example.com 형식으로 URL 주소 만 입력해야합니다. |
<output> 요소
HTML5는 스크립트로 작성된 출력과 같은 다양한 유형의 출력 결과를 나타내는 데 사용되는 새로운 요소 <output>을 도입했습니다.
당신은 사용할 수 있습니다 for계산에 영향을 준 문서에서 출력 요소와 다른 요소 간의 관계를 지정하는 속성 (예 : 입력 또는 매개 변수). for 속성의 값은 공백으로 구분 된 다른 요소의 ID 목록입니다.
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
function showResult() {
x = document.forms["myform"]["newinput"].value;
document.forms["myform"]["result"].value = x;
}
</script>
</head>
<body>
<form action = "/cgi-bin/html5.cgi" method = "get" name = "myform">
Enter a value : <input type = "text" name = "newinput" />
<input type = "button" value = "Result" onclick = "showResult();" />
<output name = "result"></output>
</form>
</body>
</html>다음 결과가 생성됩니다-
자리 표시 자 속성
HTML5는 placeholder. <input> 및 <textarea> 요소에 대한이 속성은 필드에 입력 할 수있는 내용에 대한 힌트를 사용자에게 제공합니다. 자리 표시 자 텍스트에는 캐리지 리턴 또는 줄 바꿈이 포함되지 않아야합니다.
다음은 자리 표시 자 속성에 대한 간단한 구문입니다.
<input type = "text" name = "search" placeholder = "search the web"/>이 속성은 최신 버전의 Mozilla, Safari 및 Crome 브라우저에서만 지원됩니다.
<!DOCTYPE HTML>
<html>
<body>
<form action = "/cgi-bin/html5.cgi" method = "get">
Enter email : <input type = "email" name = "newinput"
placeholder = "[email protected]"/>
<input type = "submit" value = "submit" />
</form>
</body>
</html>이것은 다음 결과를 생성합니다-
자동 초점 속성
이것은 문서를로드 할 때 JavaScript로 쉽게 프로그래밍 할 수있는 간단한 원스텝 패턴으로 특정 양식 필드 하나에 자동으로 초점을 맞 춥니 다.
HTML5는 autofocus 다음과 같이 사용됩니다-
<input type = "text" name = "search" autofocus/>이 속성은 최신 버전의 Mozilla, Safari 및 Chrome 브라우저에서만 지원됩니다.
<!DOCTYPE HTML>
<html>
<body>
<form action = "/cgi-bin/html5.cgi" method = "get">
Enter email : <input type = "text" name = "newinput" autofocus/>
<p>Try to submit using Submit button</p>
<input type = "submit" value = "submit" />
</form>
</body>
</html>필수 속성
이제 HTML5에서 다음과 같은 새 속성을 도입했기 때문에 빈 텍스트 상자와 같은 클라이언트 측 유효성 검사를 위해 JavaScript를 사용할 필요가 없습니다. required 다음과 같이 사용되며 가치가 있다고 주장합니다.
<input type = "text" name = "search" required/>이 속성은 최신 버전의 Mozilla, Safari 및 Chrome 브라우저에서만 지원됩니다.
<!DOCTYPE HTML>
<html>
<body>
<form action = "/cgi-bin/html5.cgi" method = "get">
Enter email : <input type = "text" name = "newinput" required/>
<p>Try to submit using Submit button</p>
<input type = "submit" value = "submit" />
</form>
</body>
</html>다음 결과가 생성됩니다-