HTML表单

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

1. 形式<form>...</ form>

2. 元素

1. input

text

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

radio

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

submit

<form action="action_page.php">    //action 属性定义在提交表单时执行的
动作。action 属性定义在提交表单时执行的动作。
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>

附：method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：
<form action="action_page.php" method="GET">
或：
<form action="action_page.php" method="POST">
GET 最适合少量数据的提交。浏览器会设定容量限制。
如果表单正在更新数据，或者包含敏感信息（例如密码）。POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

password

<form>
 User name:<br>
<input type="text" name="username">
<br>
 User password:<br>
<input type="password" name="psw">
</form>

checkbox:复选框允许用户在有限数量的选项中选择零个或多个选项。

<form action="/demo/demo_form.asp">
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
<br><br>
<input type="submit">
</form>

HTML5 增加了多个新的输入类型：

color

<form action="action_page.php">
  Select your favorite color:
  <input type="color" name="favcolor" value="#ff0000">
  <input type="submit">
</form>

date

<form action="/demo/demo_form.asp">
  生日：
  <input type="date" name="bday">
  <input type="submit">
</form>

限制日期

请输入 1980-01-01 之前的日期：<br>
<input type="date" name="bday" max="1979-12-31"><br><br>

datetime
datetime-local
email
month
number

<form action="/demo/demo_form.asp">
  数量（1 到 5 之间）：
  <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>

固定步长

<form action="action_page.php">
  Quantity:
  <input type="number" name="points"
   min="0" max="100" step="10" value="30">
  <input type="submit">
</form>

range滑块控件

<form>
  <input type="range" name="points" min="0" max="10">
</form>

search
tel
time
url
week

2. 属性

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>

服务器接收到的用户输入为：
firstname=Mickey&lastname=Mouse
HTML <form> 元素，已设置所有可能的属性，是这样的：

<form action="action_page.php" method="GET" target="_blank" 
accept-charset="UTF-8" ectype="application/x-www-form-urlencoded" 
autocomplete="off" novalidate>
...
</form>

readonly 属性
<input type="text" name="firstname" value="John" readonly>
disabled 属性
<input type="text" name="firstname" value="John" disabled>
size 属性:输入字段的尺寸（以字符计）
<input type="text" name="firstname" value="John" size="40">
maxlength 属性:输入字段允许的最大长度
<input type="text" name="firstname" maxlength="10">

3. <select> 元素（下拉列表）

<form action="/demo/demo_form.asp">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>

您能够通过添加 selected 属性来定义预定义选项。
<option value="fiat" selected>Fiat</option>

4. <textarea> 元素:多行输入字段（文本域）：

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

5. <button> 元素定义可点击的按钮

<button type="button" onclick="alert('Hello World!')">点击我！</button>

HTML学习笔记（三）--表单