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>

다음 결과가 생성됩니다-