常用6种type的form表单的input标签分析及示例

<input> 标签用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

在这里博主介绍6中type的input，分别是文本域、密码字段、单选按钮、复选按钮、提交按钮以及指定图片按钮

1：文本域

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

First name: <input type="text" name="firstname">

浏览器下效果展示

2：密码字段

密码字段通过标签<input type="password"> 来定义

Password: <input type="password" name="pwd">

浏览器下效果展示

注意:密码字段字符不会明文显示，而是以星号或圆点替代。

3：单选按钮

<input type="radio"> 标签定义了表单单选框选项

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

浏览器显示效果如下:

4:复选按钮

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

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

浏览器显示效果如下:

5:提交按钮

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

Username: <input type="text" name="user">
<input type="submit" value="Submit">

浏览器显示效果如下:

6:指定图片按钮

<input type="image"> 定义了指定图片按钮,src后面跟上指定的图片地址或者路径，alt属性为图像提供alt文本，因此屏幕阅读器用户可以更好地了解按钮的用途。

<input type="image" id="image" alt="Login"
           src="/media/examples/login-button.png" />

浏览器显示效果如下: