HTML表单用于搜集不同类型的用户输入。

HTML表单

<form>表单.

表单是一种框架，不可见。

1
2
3
<form>
  form elements
</form>

表单可包含的元素：input、单选按钮、复选框、提交按钮等。

<input>元素

<input>元素根据type属性的不同有很多种。

  • text：常规文本输入
  • radio：单选按钮输入
  • submit：提交按钮

文本输入

<input type=”text” name=”firstname”>

1
2
3
4
5
6
7
<form>
 First name:<br>
<input type="text">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

文本字段的默认宽度是20。

单选框

<input type=”radio”>

1
2
3
4
5
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

提交按钮

<input type=”submit”>

1
2
3
4
5
6
7
8
9
<form action="action_page.php" method="GET">
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默认是当前页面。

method属性规定表单提交的HTTP方法，通常POST或GET。

想要正确提交表单，必须为元素设置name属性。

<select>元素（下拉列表）

<select>

<option value=””></option>

</select>

1
2
3
4
5
6
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

<textarea>元素

<textarea>多行文本输入元素。

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

<button>元素

<button>，按钮。

1
<button type="button" onclick="alert('Hello World!')">Click Me!</button>