表單元素
form
attribute definitions
action = uri [ct]
this attribute specifies a form processing agent. user agent behavior for a value other than an http uri is undefined.
method = get|post [ci]
this attribute specifies which http method will be used to submit the form data set. possible (case-insensitive) values are "get" (the default) and "post". see the section on form submission for usage information.
enctype = content-type [ci]
this attribute specifies the content type used to submit the form to the server (when the value of method is "post"). the default value for this attribute is "application/x-www-form-urlencoded". the value "multipart/form-data" should be used in combination with the input element, type="file".
accept-charset = charset list [ci]
this attribute specifies the list of character encodings for input data that is accepted by the server processing this form. the value is a space- and/or comma-delimited list of charset values. the client must interpret this list as an exclusive-or list, i.e., the server is able to accept any single character encoding per entity received.
the default value for this attribute is the reserved string "unknown". user agents may interpret this value as the character encoding that was used to transmit the document containing this form element.
accept = content-type-list [ci]
this attribute specifies a comma-separated list of content types that a server processing this form will handle correctly. user agents may use this information to filter out non-conforming files when prompting a user to select files to be sent to the server (cf. the input element when type="file").
name = cdata [ci]
this attribute names the element so that it may be referred to from style sheets or scripts. note. this attribute has been included for backwards compatibility. applications should use the id attribute to identify elements.
the form element acts as a container for controls. it specifies:
the layout of the form (given by the contents of the element).
the program that will handle the completed and submitted form (the action attribute). the receiving program must be able to parse name/value pairs in order to make use of them.
the method by which user data will be sent to the server (the method attribute).
a character encoding that must be accepted by the server in order to handle this form (the accept-charset attribute). user agents may advise the user of the value of the accept-charset attribute and/or restrict the user's ability to enter unrecognized characters.
a form can contain text and markup (paragraphs, lists, etc.) in addition to form controls.
the following example shows a form that is to be processed by the "adduser" program when submitted. the form will be sent to the program using the http "post" method.
<form action="http://somesite.com/prog/adduser" method="post">
...form contents...
</form>
please consult the section on form submission for information about how user agents must prepare form data for servers and how user agents should handle expected responses.
note. further discussion on the behavior of servers that receive form data is beyond the scope of this specification.
label
some form controls automatically have labels associated with them (press buttons) while most do not (text fields, checkboxes and radio buttons, and menus).
for those controls that have implicit labels, user agents should use the value of the value attribute as the label string.
the label element is used to specify labels for controls that do not have implicit labels,
the label element
for = idref [cs]
this attribute explicitly associates the label being defined with another control.
when present, the value of this attribute must be the same as the value of
the id attribute of some other control in the same document. when absent,
the label being defined is associated with the element's contents.
attributes defined elsewhere
the label element may be used to attach information to controls.
each label element is associated with exactly one form control.
the for attribute associates a label with another control explicitly:
the value of the for attribute must be the same as the value of the id
attribute of the associated control element. more than one label
may be associated with the same control by creating multiple references via the for attribute.
this example creates a table that is used to align two
text input controls and their associated labels. each label is associated explicitly with one text input:
<form action="..." method="post">
<table>
<tr>
<td><label for="fname">first name</label>
<td><input type="text" name="firstname" id="fname">
<tr>
<td><label for="lname">last name</label>
<td><input type="text" name="lastname" id="lname">
</table>
</form>
this example extends a previous example form to include label elements.
<form action="http://somesite.com/prog/adduser" method="post">
<p>
<label for="firstname">first name: </label>
<input type="text" id="firstname"><br>
<label for="lastname">last name: </label>
<input type="text" id="lastname"><br>
<label for="email">email: </label>
<input type="text" id="email"><br>
<input type="radio" name="sex" value="male"> male<br>
<input type="radio" name="sex" value="female"> female<br>
<input type="submit" value="send"> <input type="reset">
</p>
</form>
to associate a label with another control implicitly,
the control element must be within the contents of the label element. in this case,
the label may only contain one control element.
the label itself may be positioned before or after the associated control.
in this example, we implicitly associate two labels with two text input controls:
<form action="..." method="post">
<p>
<label>
first name
<input type="text" name="firstname">
</label>
<label>
<input type="text" name="lastname">
last name
</label>
</p>
</form>
note that this technique cannot be used when a table is being used for layout,
with the label in one cell and its associated control in another cell.
when a label element receives focus, it passes the focus on to its associated control.
see the section below on access keys for examples.
labels may be rendered by user agents in a number of ways (e.g., visually,
read by speech synthesizers, etc.)
html <label> 標籤
定義和用法
<label> 標籤爲 input 元素定義標註（標記）。
label 元素不會向用戶呈現任何特殊效果。不過，它爲鼠標用戶改進了可用性。
如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標籤時，
瀏覽器就會自動將焦點轉到和標籤相關的表單控件上。
<label> 標籤的 for 屬性應當與相關元素的 id 屬性相同。
實例
帶有兩個輸入字段和相關標記的簡單 html 表單：
<form>
<label for="male">male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">female</label>
<input type="radio" name="sex" id="female" />
</form>
fieldset
lengend
the fieldset element allows authors to group thematically related controls and labels.
grouping controls makes it easier for users to understand their purpose
while simultaneously facilitating tabbing navigation for visual user agents and
speech navigation for speech-oriented user agents. the proper use of this element
makes documents more accessible.
the legend element allows authors to assign a caption to a fieldset.
the legend improves accessibility when the fieldset is rendered non-visually.
in this example, we create a form that one might fill out at the doctor's office.
it is divided into three sections: personal information, medical history,
and current medication. each section contains controls for inputting the appropriate information.
<form action="..." method="post">
<p>
<fieldset>
<legend>personal information</legend>
last name: <input name="personal_lastname" type="text" tabindex="1">
first name: <input name="personal_firstname" type="text" tabindex="2">
address: <input name="personal_address" type="text" tabindex="3">
...more personal information...
</fieldset>
<fieldset>
<legend>medical history</legend>
<input name="history_illness"
type="checkbox"
value="smallpox" tabindex="20"> smallpox
<input name="history_illness"
type="checkbox"
value="mumps" tabindex="21"> mumps
<input name="history_illness"
type="checkbox"
value="dizziness" tabindex="22"> dizziness
<input name="history_illness"
type="checkbox"
value="sneezing" tabindex="23"> sneezing
...more medical history...
</fieldset>
<fieldset>
<legend>current medication</legend>
are you currently taking any medication?
<input name="medication_now"
type="radio"
value="yes" tabindex="35">yes
<input name="medication_now"
type="radio"
value="no" tabindex="35">no
if you are currently taking medication, please indicate
it in the space below:
<textarea name="current_medication"
rows="20" cols="50"
tabindex="40">
</textarea>
</fieldset>
</form>
note that in this example, we might improve the visual presentation of
the form by aligning elements within each fieldset (with style sheets),
adding color and font information (with style sheets),
adding scripting (say, to only open the "current medication" text area
if the user indicates he or she is currently on medication), etc.
input type有 text textarea radio checkboxs file password
文本域（text fields）
當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。
<form>
first name:
<input type="text" name="firstname" />
<br />
last name:
<input type="text" name="lastname" />
</form>
瀏覽器顯示如下：
first name:
last name:
注意，表單本身並不可見。同時，在大多數瀏覽器中，文本域的缺省寬度是20個字符。
單選按鈕 radio button
複選框 checkboxs
下接菜單
文件
總結
control types created with input
the control type defined by the input element depends on the value of the type attribute:
text
creates a single-line text input control.
password
like "text", but the input text is rendered in such a way as to hide the characters
(e.g., a series of asterisks). this control type is often used for sensitive input
such as passwords. note that the current value is the text entered by the user,
not the text rendered by the user agent.
note. application designers should note that this mechanism affords only light security protection.
although the password is masked by user agents from casual observers,
it is transmitted to the server in clear text,
and may be read by anyone with low-level access to the network.
checkbox
creates a checkbox.
radio
creates a radio button.
submit
creates a submit button.
image
creates a graphical submit button. the value of the src attribute specifies the uri of
the image that will decorate the button. for accessibility reasons, authors should provide
alternate text for the image via the alt attribute.
when a pointing device is used to click on the image, the form is submitted and the
click coordinates passed to the server. the x value is measured in pixels from the
left of the image, and the y value in pixels from the top of the image. the submitted
data includes name.x=x-value and name.y=y-value where "name" is the value of the name
attribute, and x-value and y-value are the x and y coordinate values, respectively.
if the server takes different actions depending on the location clicked,
users of non-graphical browsers will be disadvantaged. for this reason,
authors should consider alternate approaches:
use multiple submit buttons (each with its own image) in place of a single graphical submit button.
authors may use style sheets to control the positioning of these buttons.
use a client-side image map together with scripting.
reset
creates a reset button.
button
creates a push button. user agents should use the value of the value attribute as the button's label.
hidden
creates a hidden control.
file
creates a file select control. user agents may use the value of the value attribute
as the initial file name.
select
<optgroup> 標籤定義選項組。
optgroup 元素用於組合選項。當您使用一個長的選項列表時，對相關的選項進行組合會使處理更加容易。
實例
通過 <optgroup> 標籤把相關的選項組合在一起：
<select>
<optgroup label="swedish cars">
<option value ="volvo">volvo</option>
<option value ="saab">saab</option>
</optgroup>
<optgroup label="german cars">
<option value ="mercedes">mercedes</option>
<option value ="audi">audi</option>
</optgroup>
</select>