Latest web development tutorials

HTML 양식

HTML 양식은 사용자 입력의 종류를 수집하기 위해 사용된다.

예

온라인 예

텍스트 필드 만들기 (텍스트 필드)
이 예는 HTML 페이지에서 텍스트 필드를 만드는 방법을 보여줍니다. 사용자가 텍스트 필드에 텍스트를 쓸 수 있습니다.

암호 필드 만들기
이 예제에서는 HTML 암호 필드를 만드는 방법을 보여줍니다.

(당신이 더 많은 예를 찾을 수 있습니다이 페이지의 맨 아래에.)

HTML 양식

양식은 양식 요소를 포함하는 영역이다.

폼 엘리먼트는 예를 들어, 사용자가 양식에 내용을 입력 할 수 있도록하는 것이다 텍스트 필드 (텍스트 영역)을, 드롭 다운리스트, 라디오 버튼 (라디오 버튼) 등의 체크 박스 (체크 박스)와.

양식은 양식 태그 <FORM> 세트를 사용합니다 :

<form>
.
input 元素
.
</form>

HTML 양식 - 입력 요소

대부분의 경우에 사용되는 폼 태그를 입력 태그입니다이다 (<입력>).

입력 형태는 타입 속성 (타입) 정의이다. 다음과 같이 자주 사용하는 입력 유형은 다음과 같습니다

텍스트 필드 (텍스트 필드)

텍스트 필드 <입력 유형 = "텍스트"> 사용자가 문자, 숫자를 입력 할 때 설정하는 태그, 및 다른 형태의 콘텐츠를 텍스트 필드가 사용될 것이다.

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

브라우저는 다음을 표시합니다 :

이름 :
성 :

참고 : 양식 자체가 표시되지 않습니다.또한, 대부분의 브라우저에서 텍스트 필드의 기본 폭은 20 자이다.

암호 필드

태그 <입력 유형 = "암호">에 의해 암호 필드를 정의합니다 :

<form>
Password: <input type="password" name="pwd">
</form>

브라우저는 다음과 같은 효과를 표시합니다

비밀번호 :

참고 : 암호 필드의 문자는 일반 텍스트로 표시, 대신 별표 또는 점으로하지 않습니다.

라디오 버튼 (라디오 버튼)

<입력 유형 = "라디오"> 태그는 테이블 만 상자 옵션 정의

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

브라우저는 다음과 같은 효과를 표시합니다

남성
여성

확인란을 선택 (체크 박스)

<입력 유형 = "체크 박스">는 체크 박스를 정의한다. 사용자는 몇 가지 주어진 선택에서 하나 또는 여러 개의 옵션을 선택해야합니다.

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

브라우저는 다음과 같은 효과를 표시합니다

나는 자전거를
나는 차를 가지고

단추 (버튼 제출) 제출

제출 버튼을 정의 <입력 유형 = "제출">입니다.

사용자가 OK 버튼을 클릭하면 양식의 내용이 다른 파일로 전송됩니다. 폼 액션 속성 대상 파일의 파일 이름을 정의한다. 통상 처리에 관한 입력 데이터를 수신했을 파일의 액션 속성에 의해 정의 됨. :

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

브라우저는 다음과 같은 효과를 표시합니다

아이디 :

위의 텍스트 상자에 몇 글자를 입력하면, 다음 입력 데이터가 "html_form_action.php"페이지로 전송되는 확인 버튼을 클릭합니다. 이 페이지는 입력 한 결과를 표시합니다.

그것을 시도 더 많은 예제

라디오 버튼 (라디오 버튼)
이 예는 HTML에서 라디오 버튼을 만드는 방법을 보여줍니다.

확인란을 선택 (체크 박스)
이 예제는 HTML 페이지에서 체크 박스를 만드는 방법을 보여줍니다. 사용자는 선택하거나 확인란을 선택 취소 할 수 있습니다.

간단한 드롭 다운 목록
이 예제는 HTML 페이지에서 간단한 드롭 다운 목록 상자를 만드는 방법을 보여줍니다. 드롭 다운 목록 상자는 선택 목록입니다.

사전 선택 드롭 다운 목록
이 예는 미리 선택된 값을 간단한 드롭 다운 목록을 만드는 방법을 보여줍니다.

텍스트 필드 (텍스트 영역)
이 예는 텍스트 필드 (여러 줄의 텍스트 입력 제어)를 만드는 방법을 보여줍니다. 사용자가 텍스트 필드에 텍스트를 쓸 수 있습니다. 단어의 쓰기 가능한 문자는 제한되지 않는다.

버튼 만들기
이 예제는 버튼을 만드는 방법을 보여줍니다. 당신은 사용자 정의 할 수 있습니다 버튼 텍스트 수 있습니다.

그것을 시도 양식 인스턴스

테두리 양식
이 예는 제목으로 데이터 주위에 상자를 그립니다하는 방법을 보여줍니다.

입력 상자와 버튼을 사용하여 양식을 확인
이 예는 양식 페이지를 추가하는 방법을 보여줍니다. 이 양식은 두 개의 입력 필드와 확인 버튼이 포함되어 있습니다.

체크 박스와 양식
이 양식은 두 개의 확인란, 확인 버튼이 포함되어 있습니다.

라디오 버튼과 양식
이 양식은 두 상자와 확인 버튼이 포함되어 있습니다.

양식에서 전자 메일 보내기
이 예는 양식에서 전자 메일을 보내는 방법을 보여줍니다.

HTML 양식 태그

새로운 기능 : HTML5 새 레이블

标签 描述
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签，一般为输入标题
<fieldset> 定义了一组相关的表单元素，并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist> New 指定一个预先定义的输入控件选项列表
<keygen> New 定义了表单的密钥对生成器字段
<output> New 定义一个计算结果