HTML表单处理用户输入

1.HTML表单用于收集用户输入。通过<form> </form>标签定义

2.<input> 元素是最重要的文本元素。

2.1.text定义常规文本输入,password定义密码字段

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

2.2.radio定义单选按钮输入,checkbox 定义复选框

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

<form >
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form

2.3.submit定义提交按钮（提交表单）

<form action="/demo/demo_form.asp" method="GET">
<input type="submit" value="Submit">
</form> 

action 属性定义在提交表单时执行的动作。指定了某个服务器脚本来处理被提交表单
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）
GET（默认方法）：适用于没有敏感信息。表单数据较少（表单数据在页面地址栏中是可见的）

2.4.<input type="number"> 用于应该包含数字值的输入字段。

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

2.5.<input type="date"> 用于应该包含日期的输入字段。(month,week,time)

<form>
Birthday:
<input type="date" name="bday">
</form>

2.6.<input type="color"> 用于应该包含颜色的输入字段。

2.7.<input type="range"> 用于应该包含一定范围内的值的输入字段。

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

2.8.<input type="email"> 用于应该包含电子邮件地址的输入字段。
2.9.<input type="search"> 用于搜索字段（搜索字段的表现类似常规文本字段）。

 

3.<select> 元素下拉列表

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

 

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

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

 

5.Input 属性
value 属性规定输入字段的初始值
readonly 属性规定输入字段为只读（不能修改）
disabled 属性规定输入字段是禁用的
size 属性规定输入字段的尺寸（以字符计）