HTML Forms & Form element

常宸

2023-12-01

HTML Forms

The <form> element defines an HTML form, 该元素定义了一个HTML表格，用来收集用户输入。表格包含表格元素，由不同类型组成，可以是输入元素，单选框，单选框，提交按钮等。

The Action Attribute

该属性定义了当表格被提交后要执行的动作。通常表格被提交到服务器端的一个带有处理脚本的网页上（即 form-handler）。如果该属性缺省，则 action is set to the current page。

The Method Attribute

该属性指定了在提交表格时使用的 HTTP 的方法（GET or POST）

<form action="action_page.php" method="GET">

The default method is GET.

什么时候使用 GET 方法呢？

If the form submission is passive (like a search engine query), and without sensitive information. When you use GET, the form data will be visible in the page address:

如果表格提交是被动的（如搜索引擎查询），且没有敏感信息时，使用 GET，因为这种方法表格的数据将会在网页地址上可见。

action_page.php?firstname=Mickey&lastname=Mouse

这种方法特别适合小数据。 Size limitation is set in your browser。

什么时候用 POST 方法呢？

如果表格在更新数据，或者包含敏感信息（如：密码），POST 方法较为安全。提交的数据在地址栏里不可见。

The Name Attribute

To be submitted correctly, each input field must have a name attribute.

为了正确地提交数据，表格里每一个输入域都必须有一个 name 属性。没有设定 name 属性的 input field 的值将不被提交。

The name attribute is used to reference elements in a JavaScript, or toreference form data after a form is submitted.

<script>
function formSubmit()
{
document.forms["myForm"].submit();
}
</script>

Grouping Form Data

使用 <fieldset> 元素将表格里相关的数据分组，create a border around the elements。使用<legend> 元素为前者定义一个 caption 说明文字。

The <select> Element

该元素定义了一个下拉菜单：

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

可以通过在 <option> 元素上添加 selected 属性，让它作为默认被选项。

The <textarea> Element

该元素定义了一个 multi-line 多行输入区域。

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

The size of a text area can be specified by the cols and rows attributes, or even better; through CSS' height and width properties.

HTML5 <datalist> Element

该元素为传统的 <input> 单行输入区域元素提供了一列 pre-defined options，这样用户可以从下拉列表里选择其中一个作为输入数据。

需要注意的是，<input> 元素的 list属性值必须指向（保持一致）<datalist> 元素的 id 属性。

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

注意： Safari 和 IE9之前版本目前不支持这个元素

<select> vs. <datalist>

For the <select> element, the user is required to select one of the options given. For the <datalist> element, it is suggested that the user select one of the options given, but he can actually enter anything he wants in the input.

前者要求输入数据必须是从下拉列表中选择的，而后者的下拉列表中的选项只是提供给用户输入的一些建议，他也可以自己输入任何想要的数据。

HTML5 <output> Element

该元素显示一个运算的结果，就像被一段脚本执行。

<form action="action_page.asp"
οninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range"  id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<input type="submit">
</form>

注意：IE不支持

针对像range这样的控件（因为改变range的值，并没有显示效果）应用如下：

<label for="age">Age</label>
<input id="age" type="range" min="18" max="120" value="18" οnchange="ageDisplay.value=value">
<output id="ageDisplay>18</output>

Bonus

Send email from a form

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>