HTML 양식
- 이전 페이지 XHTML 속성
- 다음 페이지 HTML 양식 속성
HTML 양식은 다양한 유형의 사용자 입력을 수집하는 데 사용됩니다.
<form> 요소
HTML 양식은 사용자 입력을 수집하는 데 사용됩니다.
<form> 요소는 HTML 양식을 정의합니다:
예제
<form> . form elements . </form>
HTML 양식은 포함합니다양식 요소。
양식 요소는 다양한 입력 요소, 체크박스, 라디오 버튼, 제출 버튼 등을 의미합니다.
<input> 요소
<input> 요소는 가장 중요한양식 요소。
<input> 요소는 다양한 형태로 존재하며, 다른 type 속성.
이 장에서 사용하는 형식은 다음과 같습니다:
| 형식 | 설명 |
|---|---|
| text | 일반 텍스트 입력을 정의합니다. |
| radio | 라디오 버튼 입력（여러 선택 중 하나 선택）을 정의합니다 |
| submit | 제출 버튼（양식 제출）을 정의합니다 |
주의사항:이 튜토리얼에서는 입력 유형에 대해 더 배울 것입니다.
텍스트 입력
<input type="text"> 다음에 사용할텍스트 입력의 단一行 입력 필드를 정의합니다:
예제
<form> First name:<br> <input type="text" name="firstname"> <br> Last name:<br> <input type="text" name="lastname"> </form>
브라우저에서는 이렇게 보입니다:
주의사항:양식 자체는 보이지 않습니다. 또한 텍스트 필드의 기본 너비는 20개 문자입니다.
라디오 버튼 입력
<input type="radio"> 정의라디오 버튼。
라디오 버튼은 사용자가 제한된 수의 옵션 중 하나를 선택할 수 있도록 합니다:
예제
<form> <input type="radio" name="sex" value="male" checked>남성 <br> <input type="radio" name="sex" value="female">여성 </form>
라디오 버튼은 브라우저에서 이렇게 보입니다:
제출 버튼
<input type="submit"> 다음에 사용할양식 처리 프로그램（양식 처리 프로그램）제출양식의 버튼.
양식 처리 프로그램은 입력 데이터를 처리하는 스크립트를 포함한 서버 페이지입니다.
양식 처리 프로그램은 양식의 action 속성에서 지정한 것은 다음과 같습니다:
예제
<form action="action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>
브라우저에서는 이렇게 보입니다:
Action 속성
action 속성양식을 제출할 때 실행할 작업을 정의합니다.
서버에 양식을 제출하는 일반적인 방법은 제출 버튼을 사용하는 것입니다.
일반적으로 양식은 웹 서버의 웹 페이지로 제출됩니다.
위의 예제에서 특정 서버 스크립트를 지정하여 제출된 양식을 처리하도록 설정했습니다:
<form action="action_page.php">
action 속성을 생략하면, action은 현재 페이지로 설정됩니다。
Method 속성
method 속성제출할 때 사용할 HTTP 메서드를 정의합니다（GET 또는 POST）：
<form action="action_page.php" method="GET">
또는：
<form action="action_page.php" method="POST">
GET을 언제 사용해야 합니까？
GET을 사용할 수 있습니다(기본 메서드)：
form 제출이 passively 되었을 때(예: 검색 엔진 쿼리) 그리고 민감한 정보가 없는 경우.
GET을 사용할 때, form 데이터는 페이지 주소 표시줄에서 볼 수 있습니다：
action_page.php?firstname=Mickey&lastname=Mouse
주의사항:GET은 적은 데이터 제출에 가장 적합합니다. 브라우저는 용량 제한을 설정합니다.
POST를 언제 사용해야 합니까？
이 경우 POST를 사용해야 합니다：
데이터가 업데이트되거나, 예를 들어 비밀번호와 같은 민감한 정보가 포함된 경우.
POST는 보안이 더 좋습니다. 왜냐하면 페이지 주소 표시줄에서 제출된 데이터는 보이지 않기 때문입니다.
Name 속성
제출되기 위해서는 각 입력 필드에 name 속성이 설정되어야 합니다。
이 예제에서는 "Last name" 입력 필드만 제출됩니다：
예제
<form action="action_page.php"> First name:<br> <input type="text" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>
<fieldset>를 사용하여 form 데이터를 조합합니다
<fieldset> form에 관련 데이터를 조합하는 element
<legend> element는 <fieldset> element에 제목을 정의합니다.
예제
<form action="action_page.php"> <fieldset> <legend>Personal information:</legend> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"></fieldset> </form>
이 HTML 코드는 브라우저에서 이렇게 보입니다：
HTML 양식 속성
HTML <form> 요소는 모든 가능한 속성을 설정한 경우 다음과 같습니다:
예제
<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"> ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate> . form elements . </form>
아래는 <form> 속성 목록입니다:
| 속성 | 설명 |
|---|---|
| accept-charset | 제출된 양식에서 사용할 문자 집합을 지정합니다. (기본: 페이지 문자 집합) |
| action | 양식을 제출할 주소(URL)를 지정합니다. (제출 페이지) |
| autocomplete | 브라우저가 자동으로 양식을 완성하도록 지정합니다. (기본: 활성화) |
| enctype | 제출된 데이터의 인코딩을 지정합니다. (기본: url-encoded) |
| method | 양식을 제출할 때 사용할 HTTP 메서드를 지정합니다. (기본: GET) |
| name | 양식의 이름을 인식합니다. (DOM 사용 시: document.forms.name) |
| novalidate | 브라우저가 양식을 검증하지 않도록 지정합니다. |
| target | action 속성에 있는 주소의 목표를 지정합니다. (기본: _self) |
주의사항:아래의 장에서 속성에 대한 더 많은 정보를 배울 수 있습니다.
- 이전 페이지 XHTML 속성
- 다음 페이지 HTML 양식 속성
