수색…
소개
입력 요소를 그룹화하고 데이터를 제출하기 위해 HTML은 양식 요소를 사용하여 입력 요소와 제출 요소를 캡슐화합니다. 이 양식은 지정된 메소드의 데이터를 서버 또는 핸들러가 처리하는 페이지로 보내는 것을 처리합니다. 이 주제에서는 입력 데이터를 수집하여 제출할 때 HTML 양식의 사용법을 설명하고 보여줍니다.
통사론
<form method="post|get" action="somePage.php" target="_blank|_self|_parent|_top|framename">
매개 변수
| 속성 | 기술 |
|---|---|
accept-charset | 양식 제출에 사용될 문자 인코딩을 지정합니다. |
action | 양식을 제출할 때 양식 데이터를 보낼 위치를 지정합니다. |
autocomplete | 양식에 자동 완성 기능을 설정할지 여부를 지정합니다. |
enctype | 양식 데이터를 서버에 제출할 때 양식 데이터를 인코딩하는 방법을 지정합니다 (method = "post"만 해당). |
method | 폼 데이터 (POST 또는 GET)를 보낼 때 사용할 HTTP 메서드를 지정합니다. |
name | 양식의 이름을 지정합니다. |
novalidate | 제출할 때 양식의 유효성을 검사하지 않도록 지정합니다. |
target | 양식을 제출 한 후 수신되는 응답을 표시 할 위치를 지정합니다. |
비고
<form> 요소는 정보를 서버에 제출하는 양식 관련 요소 (예 : <button> <fieldset> <input> <label> <output> <select> <textarea> )가 포함 된 섹션을 나타냅니다. 시작 태그 ( <form> )와 종료 태그 ( </form> )는 모두 필요합니다.
제출
액션 속성
action 속성은 양식 제출시 수행 할 작업을 정의합니다.이 작업은 일반적으로 제출 된 정보를 수집하고 함께 작동하는 스크립트로 연결됩니다. 비워두면 동일한 파일로 전송됩니다.
<form action="action.php">
메소드 속성
method 속성은 GET 또는 POST 형식의 HTTP 메소드를 정의하는 데 사용됩니다.
<form action="action.php" method="get">
<form action="action.php" method="post">
GET 메소드는 대개 데이터를 가져 오는 데 사용됩니다 (예 : ID 또는 이름으로 게시물을 수신하거나 검색 쿼리를 제출하는 경우). GET 메소드는 양식 데이터를 조치 속성에 지정된 URL에 추가합니다.
www.example.com/action.php?firstname=Mickey&lastname=Mouse
POST 메소드는 데이터를 스크립트에 제출할 때 사용됩니다. POST 메서드는 양식 데이터를 작업 URL에 추가하지 않지만 요청 본문을 사용하여 보냅니다.
양식의 데이터를 올바르게 제출하려면 이름 속성 이름을 지정해야합니다.
예를 들어 필드의 값을 보내고 이름을 성으로 설정해 보겠습니다.
<input type="text" name="lastname" value="Mouse">
추가 특성
<form action="action.php" method="post" target="_blank" accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
<!-- form elements -->
</form>
양식 태그의 대상 속성
target 속성은 양식을 제출 한 후 수신되는 응답을 표시 할 위치를 나타내는 이름 또는 키워드를 지정합니다.
target 속성은 브라우징 컨텍스트 (예 : 탭, 창 또는 인라인 프레임)의 이름 또는 키워드를 정의합니다.
대상 속성이있는 태그에서 :
<form target="_blank">
속성 값
| 값 | 기술 |
|---|---|
| _공백 | 응답이 새 창이나 탭에 표시됩니다. |
| _본인 | 응답이 동일한 프레임에 표시됩니다 (기본값). |
| _부모의 | 응답이 상위 프레임에 표시됩니다. |
| _상단 | 창 전체에 응답이 표시됩니다. |
| 프레임 이름 | 응답은 명명 된 iframe에 표시됩니다. |
주 : target 속성은 HTML 4.01 에서 더 이상 사용되지 않습니다 . target 속성은 HTML5 에서 지원 됩니다.
프레임 및 프레임 세트는 HTML5 에서 지원되지 않으므로 _parent, _top 및 framename 값은 이제 대부분 iframe과 함께 사용됩니다 .
파일 업로드
form 태그의 enctype 속성을 multipart/form-data 로 설정하여 이미지 및 파일을 서버에 업로드 / 제출할 수 있습니다. enctype 은 양식 데이터가 서버로 제출하는 동안 인코딩되는 방법을 지정합니다.
예
<form method="post" enctype="multipart/form-data" action="upload.php">
<input type="file" name="pic" />
<input type="submit" value="Upload" />
</form>
몇 개의 입력 필드 그룹화
양식을 디자인하는 동안 몇 개의 입력 필드를 그룹으로 묶어 양식 레이아웃을 구성하는 것을 원할 수 있습니다. 이 작업은 태그를 사용하여 수행 할 수 있습니다. 다음은이를 사용하는 예제입니다.
각 필드 세트에 대해 LEGEND TEXT 태그를 사용하여 세트에 대한 범례를 설정할 수 있습니다
예
<form>
<fieldset>
<legend>1st field set:</legend>
Field one:<br>
<input type="text"><br>
Field two:<br>
<input type="text"><br>
</fieldset><br>
<fieldset>
<legend>2nd field set:</legend>
Field three:<br>
<input type="text"><br>
Field four:<br>
<input type="text"><br>
</fieldset><br>
<input type="submit" value="Submit">
</form>
결과
브라우저 지원
Chrome, IE, Edge, FireFox, Safari 및 Opera의 최신 버전은 태그도 지원합니다.