HTML 양식

HTML 양식은 다양한 유형의 사용자 입력을 수집하며, 모든 브라우저가 <form> 태그를 지원합니다. <form> 태그는 사용자 입력을 위해 HTML 양식을 생성하는 데 사용됩니다. 양식은 입력 요소(예: 텍스트 필드, 체크박스, 라디오 박스, 제출 버튼 등)를 포함할 수 있습니다.

온라인 예제

텍스트 필드 입력 상자 생성
이 예제에서는 HTML 페이지에서 텍스트 필드를 생성하는 방법을 보여줍니다. 사용자는 텍스트 필드에 텍스트를 입력할 수 있습니다.

비밀번호 필드 입력 상자 생성
이 예제에서는 HTML의 비밀번호 필드를 생성하는 방법을 보여줍니다.

HTML 양식

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

양식 요소는 사용자가 양식에서 내용을 입력할 수 있도록 허용하는 요소입니다. 예를 들어: 텍스트 필드(textarea)、드롭다운 목록、라디오 박스(radio-버튼(buttons)、체크박스(checkboxes) 등입니다.

양식은 양식 태그 <form>를 통해 설정됩니다:

<form>
.
input 요소
.
</form>

HTML 양식 - 입력 요소

대부분 사용되는 양식 태그는 입력 태그(<input>)입니다.

입력 유형은 타입 속성(type)에 의해 정의됩니다. 자주 사용되는 입력 유형은 다음과 같습니다:

텍스트 필드(Text Fields)

텍스트 필드는<input type="text"> 태그를 통해 설정되며, 사용자가 양식에서 문자, 숫자 등을 입력할 때 사용됩니다.

<form action="/run/demo-form.php"> 　　
이름:<input type="text" name="firstname" size="20"}}/><br/>이름:<input type="text" name="lastname" size="20"}}/><br/><input type="submit" value="Submit"/> </form>

브라우저에서 다음과 같이 표시됩니다：

주의:폼 자체는 보이지 않습니다. 또한, 대부분의 브라우저에서 텍스트 필드의 기본 너비는 20 개의 문자.

암호 필드

암호 필드는 <input type="password"> 태그를 통해 정의됩니다:

<form action="/run/demo-form.php"> 　　
Password:<input type="password" name="pwd"/><input type="submit" value="Submit"/> </form>

브라우저에서 표시되는 결과는 다음과 같습니다:

주의:암호 필드의 문자는 명시적으로 표시되지 않으며, 별표나 점으로 대체됩니다.

단일 선택 버튼(Radio Buttons)

<input type="radio"> 태그는 폼의 단일 선택 옵션을 정의합니다

<form action="/run/demo-form.php"> 　　
<input type="radio" name="sex" value="male"/>Male<br/><input type="radio" name="sex" value="female"/>Female<input type="submit" value="Submit"/> </form>

브라우저에서 표시되는 결과는 다음과 같습니다:

체크박스(Checkboxes)

<input type="checkbox">은 체크박스를 정의합니다. 사용자는 주어진 선택 사항 중 하나나 여러 가지를 선택해야 합니다.

<form action="/run/demo-form.php"> 　　
<input type="checkbox" name="vehicle" value="Bike"/>I have a bike<br/><input type="checkbox" name="vehicle" value="Car"/>I have a car<input type="submit" value="Submit"/> </form>

브라우저에서 표시되는 결과는 다음과 같습니다:

제출 버튼(Submit Button)

<input type="submit">은 제출 버튼을 정의합니다.

사용자가 확인 버튼을 클릭할 때, 폼의 내용이 다른 파일로 전송됩니다. 폼의 액션 속성은 목적 파일의 파일 이름을 정의합니다. 이 액션 속성으로 정의된 파일은 일반적으로 수신된 입력 데이터를 처리하는 데 사용됩니다.:

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

브라우저에서 표시되는 결과는 다음과 같습니다:

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

更多在线示例

단일 선택 버튼(Radio buttons)
이 예제에서 HTML에서 단일 선택 버튼을 생성하는 방법을 보여줍니다.

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

단순한 드롭다운 목록
이 예제에서 HTML 페이지에 간단한 드롭다운 박스를 생성하는 방법을 보여줍니다. 드롭다운 박스는 선택 가능한 목록입니다.

预选下拉列表
이 예제에서 간단한 пред选定下拉列表를 생성하는 방법을 보여줍니다.

텍스트 필드(Textarea)
텍스트 필드(다중 행 텍스트 입력 컨트롤)을 생성하는 방법을 보여줍니다. 사용자는 텍스트 필드에 텍스트를 입력할 수 있습니다. 입력할 수 있는 문자 수는 제한이 없습니다.

버튼 생성
버튼을 생성하는 방법을 보여줍니다. 버튼에 텍스트를自定义할 수 있습니다.

표单 예제

프레임이 있는 표单
이 예제에서 데이터 주위에 제목이 있는 프레임을 그리는 방법을 보여줍니다.

입력 필드와 확인 버튼이 있는 표单
이 예제에서 표单을 페이지에 추가하는 방법을 보여줍니다. 이 표单에는 두 개의 입력 필드와 확인 버튼이 포함되어 있습니다.

체크 박스가 있는 표单
이 표单에는 두 개의 체크 박스와 확인 버튼이 포함되어 있습니다.

단일 선택 버튼이 있는 표单
이 표单에는 두 개의 단일 선택 버튼과 확인 버튼이 포함되어 있습니다.

표单을 통해 이메일 보내기
이 예제에서 표单을 통해 이메일을 보내는 방법을 보여줍니다.

HTML 표单 태그

New : HTML5새 레이블