HTML 양식 요소

HTML 양식 요소

웹 페이지에 HTML 양식 처리를 위해 서버로 전송되는 데이터를 입력 할 수있는 사용자 수 있습니다. 웹 사용자가 체크 박스, 라디오 버튼, 또는 텍스트 필드를 사용하여 양식을 작성하기 때문에 양식 용지 또는 데이터베이스 형태를 유사 할 수 있습니다.

예를 들어, 양식은 제품을 주문하는 선박 또는 신용 카드 데이터를 입력 할 수 있습니다, 또는 검색 엔진의 검색 결과를 검색 할 수 있습니다.

이 장에서는 모든 HTML 양식 요소에 대해 설명합니다.

<input> 요소

가장 중요한 형태 요소는 인 <input> 엘리먼트.

<input> 요소는에 따라 다양한 방식으로 변할 수 type 속성.

<select> 요소 (Drop-Down List)

<select> 요소는 드롭 다운 목록을 정의합니다 :

<option> 요소는 선택할 수있는 옵션을 정의합니다.

선택으로 목록은 일반적으로 첫 번째 항목을 표시합니다.

당신은 미리 정의 된 옵션을 정의하는 선택 속성을 추가 할 수 있습니다.

<textarea> 요소

<textarea> 요소는 멀티 라인 입력 필드 정의 ( a text area ) :

이것은 HTML 코드가 위의 브라우저에 표시되는 방법이다 :

고양이 정원에서 놀고 있었다.

<button> 요소

<button> 요소는 클릭 가능한 버튼을 정의한다 :

이것은 HTML 코드가 위의 브라우저에 표시되는 방법이다 :

클릭 해주세요!

HTML5 양식 요소

HTML5는 다음과 같은 형식 요소를 추가 :

• <datalist>
• <keygen>
• <output>

HTML5 <datalist> 요소

<datalist> 요소는에서 미리 정의 된 옵션의리스트를 지정 <input> 요소.

사용자는 입력 데이터와 같은 미리 정의 된 옵션의 드롭 다운 목록이 표시됩니다.

list 의 속성 <input> 요소는 참조해야 id 의 속성 <datalist> 엘리먼트.

예

<input> A의 미리 정해진 값으로 소자 <datalist> :

<form action="action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

»그것을 자신을 시도

HTML5 <keygen> 요소

의 목적 <keygen> 엘리먼트는 사용자를 인증하는 보안 방법을 제공하는 것이다.

<keygen> 요소는 형태로 키 쌍 생성기 필드를 지정한다.

양식이 제출 될 때, 두 개의 키는 개인 하나 하나 개의 공용을 생성됩니다.

개인 키는 로컬로 저장되고, 공개 키는 서버로 전송됩니다.

공개 키는 미래에 사용자를 인증 할 수있는 클라이언트 인증서를 생성하는 데 사용할 수 있습니다.

예

Keygen은 필드 양식 :

<form action="action_page.php">
  Username: <input type="text" name="user">
  Encryption: <keygen name="security">
  <input type="submit">
</form>

»그것을 자신을 시도

HTML5 <output> 요소

<output> 요소는 계산 결과를 나타내고, (a 스크립트를 수행 등).

예

계산을 수행하고 그 결과에 보여 <output> 요소 :

<form action="action_page.asp"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

»그것을 자신을 시도

연습으로 자신을 테스트!

연습 1» 운동 2» 운동 3»

HTML 양식 요소

= HTML5의 새로운.