HTML5_html5 튜토리얼 기술의 새로운 양식 요소 및 속성 분석 예

이 기사에서는 예제 코드를 사용하여 HTML5의 새로운 양식 요소와 속성을 보여줍니다. 데모 코드에는 자리 표시자 속성, 자동 초점 속성, 목록 및 데이터 목록 요소, 검색 유형 텍스트 상자, 이메일 유형 텍스트 상자, 숫자 유형 텍스트 상자, 범위가 포함됩니다. 유형 텍스트 상자, 전화 유형 텍스트 상자, URL 유형 텍스트 상자 및 날짜, 시간 유형 입력 요소 등이 있습니다.
샘플 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

< section>

HTML5 모바일 웹 개발 가이드

< legend> ;HTML5 new element--form element

 자리 표시자 속성: <br> 일반적으로 텍스트 상자에 사용됩니다. <br> 주요 기능은 다음과 같습니다. 상자가 입력되지 않은 상태이고 내용이 비어 있으면 텍스트 상자의 프롬프트 내용 <br> 효과: <br> 텍스트 상자에 초점이 맞춰지면 텍스트 상자가 초점을 잃고 내용이 없으면 프롬프트 정보가 자동으로 지워집니다. 입력하면 프롬프트 정보가 자동으로 다시 지워집니다. <br> onfocel 및 onblur 이벤트의 도움이 필요한 기존 텍스트 상자가 필요하지 않습니다 <br> (대부분의 PC 브라우저 및 모바일 브라우저와 호환된다고 말할 수 있습니다. 기술은 실제로 발전했습니다) <br> 예: &lt ;input type="text" placeholder="나는 미리 알림으로 사용되는 자리 표시자입니다."><br> 

< ;pre> 자동 초점 속성:
지정된 컨트롤은 자동으로 포커스를 얻습니다. HTML 페이지에는 변경된 속성이 있는 컨트롤이 하나만 있을 수 있습니다.
예:

;

 list 및 datalist 요소: <br> list 요소의 주요 기능은 텍스트 상자 입력을 프롬프트하는 것이며, 프롬프트의 데이터 소스는 datalist <br> 현재 list 및 datalist에서 제공됩니다. 요소는 Opera 브라우저에서만 지원되며 어떤 모바일 브라우저도 이 기능을 지원하지 않습니다 <br> 예: <input type="text" placeholder="목록 속성과 데이터 목록 요소를 추가했지만 나를 이해하는 사람이 많지 않습니다." 목록 ="myDataList"><br> <datalist id="myDataList"><br> <option label="1">나는 datalist1입니다</option><br> <option label="2" >나는 datalist2입니다</option><br> <option label="3"> 나는 datalist3입니다</option><br> <option label="4">나는 datalist4입니다</option><br> </datalist><br> 

 검색 유형 텍스트 상자: <br> 주로 사용되는 텍스트 상자 키워드 검색<br> 이 텍스트 상자와 일반 텍스트 상자의 유일한 차이점은 Safari 및 Chrome에서 탐색된다는 것입니다. 브라우저 아래에서는 텍스트 상자의 모양이 둥글게 표시됩니다. <br> 예: <입력 유형= "search" placeholder="나는 검색형 텍스트 상자입니다."><br> 

 이메일 유형 텍스트 상자: <br>은 이메일 내용을 지정할 수 있는 텍스트 상자로 일반적으로 이메일 주소를 입력하는 입력 텍스트 상자에 사용됩니다. 텍스트 상자 일반 텍스트 상자와 거의 동일해 보이지만 Safari 모바일 브라우저에서는 실제로 다릅니다 <br> 키보드는 텍스트 상자 유형에 따라 해당 키보드를 표시합니다 <br> 예: <입력 유형 = "email" placeholder="저는 이메일 유형 텍스트 상자입니다."><br> 

 : <br>은 숫자를 입력하는 데 사용되는 텍스트 상자 유형입니다. <br> min, max, step 속성과 함께 사용할 수 있습니다. <br> 예: <input type="number" value="0" min=" 0 " max="10" step="1"><br> 

 범위 유형 텍스트 상자:<br> 슬라이딩 입력 방식을 제공하는 수치 범위 입력 텍스트 박스 타입입니다. <br> min, max, range 등의 속성과 함께 사용해야 합니다. <br> 예: <input type="range" value=" 1 " min="0" max="100" step="1"><br> 

 전화 유형 텍스트 상자: <br>는 사용자가 전화번호를 입력하는 텍스트 상자 유형입니다. <br> 모바일 브라우저에서 이 텍스트 상자의 키보드는 텍스트 상자 유형에 따라 해당 키보드를 표시합니다. <br> 예: < input type="tel" placeholder="저는 전화 유형 텍스트 상자입니다."><br> 

< 유형 텍스트 상자:
은 사용자가 URL 주소를 입력하는 텍스트 상자 유형입니다.
모바일 브라우저에서 이 텍스트 상자의 키보드는 텍스트 상자 유형에 따라 해당 키보드를 표시합니다.
예:

그러나 이러한 유형은 널리 지원되지 않습니다<br /> 세부 사항은 다음과 같습니다. <br /> 날짜 및 시간(시간대 포함) ): <br /> <input type="datetime"><br> 날짜 및 시간(시간대 제외): <br> <input type="datetime-local"><br> 시간 선택 선택기 텍스트 상자 : <br> <input type="time"><br> 날짜 선택기 텍스트 상자: <br> <input type="date"><br> 연도의 주 번호 선택기 텍스트 상자:<br> &lt ;input type="week"><br> 월 선택기 텍스트 상자: <br> <input type="month"><br>

< ;/article>

HTML5 새 요소--양식 요소