<form> 요소
HTML 양식은 사용자 입력을 수집하는 데 사용됩니다.
<form> 요소는 HTML 양식을 정의한다 :
<form>
.
HTML 양식은 폼 요소가 포함되어 있습니다. 폼 엘리먼트는 전송 버튼 등, 입력 요소, 체크 박스, 라디오 버튼의 종류이다.
<input> 요소
<input> 요소의 가장 중요한 형태 요소이다.
<input> 요소는에 따라 다양한 변형을 갖는 type 속성.
다음은이 장에서 사용되는 유형은 다음과 같습니다
유형 기술 text 일반 텍스트 입력을 정의합니다 radio 라디오 버튼 입력을 정의 (for selecting one of many choices) submit [전송] 버튼을 정의합니다 (for submitting the form)
이 튜토리얼에서 나중에 입력 유형에 대해 더 많이 배울 것입니다.
텍스트 입력
<input type="text"> 텍스트 입력을위한 하나의 라인 입력 필드를 정의한다 :
예
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
»그것을 자신을 시도 이것은 브라우저의 모양을하는 방법입니다 :
이름:
성:
Note: 양식 자체가 표시되지 않습니다. 또한 텍스트 필드의 기본 너비는 20 자입니다 있습니다.
Radio 버튼 입력
<input type="radio"> 정의 radio 버튼.
Radio 버튼은 사용자가 선택의 제한된 수의 ONE 선택할 수 있습니다 :
예
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
»그것을 자신을 시도 이것은 HTML 코드가 위의 브라우저에 표시되는 방법이다 :
남성
여자
다른
제출 버튼
<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>
»그것을 자신을 시도 이것은 HTML 코드가 위의 브라우저에 표시되는 방법이다 :
이름:
성:
Action 특성
action 속성은 양식이 제출 될 때 작업을 수행 할 정의합니다.
서버에 양식을 제출하는 일반적인 방법은 제출 버튼을 사용하는 것입니다.
일반적으로, 형태는 웹 서버에 웹 페이지에 제출된다.
위의 예에서, 서버 측 스크립트는 제출 된 양식을 처리하기 위해 지정됩니다
<form action="action_page.php ">
는 IF action 속성이 생략, 작업은 현재 페이지로 설정됩니다.
Method 특성
method 속성은 HTTP 메소드 (지정 GET 또는 POST ) 양식을 제출하는 경우에 사용 :
<form action="action_page.php" method="get" > 또는:
<form action="action_page.php" method="post" >
때 사용하는 GET ?
당신은 사용할 수 있습니다 GET (the default method) :
양식 제출은 수동 인 경우 (like a search engine query) , 민감한 정보없이.
당신이 사용하는 경우 GET , 양식 데이터는 페이지 주소에서 볼 수 있습니다 :
action_page.php?firstname=Mickey&lastname=Mouse GET 데이터의 짧은 양에 가장 적합합니다. 크기 제한은 브라우저에서 설정됩니다.
때 사용하는 POST ?
당신은 사용해야 POST :
형태는 데이터를 갱신하고, 또는 중요한 정보가 포함되어있는 경우 (password) .
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>
<fieldset> 형태에 관련된 데이터 소자 군.
<legend> 요소는 캡션 정의 <fieldset> 요소.
예
<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 Form 속성
HTML로는 <form> 요소는 가능한 모든 속성을 설정하여, 다음과 같이 표시됩니다
<form action="action_page.php" method="post" target="_blank"
accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded"
autocomplete="off" novalidate>
.
연습으로 자신을 테스트!
여기의 목록입니다 <form> 속성 :
속성 기술 accept-charset (다음 페이지의 캐릭터 세트 기본값) 제출 된 형태로 사용되는 문자 집합을 지정합니다. action 주소 지정 (url) (: 제출 페이지 기본) 양식을 제출. autocomplete 브라우저가 양식을 자동으로 완성할지 여부를 지정합니다 (default: on) . enctype 제출 된 데이터의 인코딩을 지정합니다 (default: is url-encoded) . method 양식 제출시 사용되는 HTTP 방법 지정 (default: GET) . name (: document.forms.name DOM 사용을위한) 양식을 식별하는 데 사용되는 이름을 지정합니다. novalidate 브라우저가 양식을 확인하지 않도록 지정합니다. target 에서 주소의 대상 지정 action (: _self 기본값) 속성을.
당신은 다음 장에서 속성에 대한 더 자세한 정보를 얻을 수 있습니다.
더 예
양식에서 전자 메일 보내기
어떻게 양식에서 전자 메일을 보낼 수 있습니다.