第八章 HTML 表单

HTML 表单用于收集用户的验入信息

HTML表单表示文中的一个区域，此区域包含交互控件，将用户收集到的
发送到wed服务器
表单是一个包含表单元素的区域

表单元素是允许用户在表单中输入内容，比如:文本域(textarea)、下拉列表(select)、单选框(radio-buttons)、复选框(checkbox) 等等。

我们可以使用<from></from>标签来创建表单:

<from>
表单元素
</from>

1.表单中的常用元素

1.input标签
<input>标签是表单中最重要的元素
输入类型是由类型属性(type)定义，根据不同type属性，显示不同的形态。
2. 文本域
<input type=“text”>标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
代码如下：

效果图如下： 

3. 密码输入
<input type=“password”name-“pwd”>定义密码的字段。该字段中的字符被掩码。
注意:密码字段字符不会明文显示，而是以星号*或圆点.替代。

代码如下：

效果图：

 4.单选按钮
<input type=“radio”>定义单选按钮单选按钮允许用户在有限的数量的选项中选择其中之一，一般选择性别用到最多。

代码如下：

效果如下：

注意，在单选按组电的name值必须相同

5,。复选框

 

<input type="cheekbox”>定义复选框
复选相允许用户在有限数量的选项中选择零个或者多个选项，一般用来选择兴趣
爱好。
代码如下：

效果图如下：

 

6.普通按钮
<inputtype=“button”>定义普通按钮，value 属性定义按钮显示的文本。(一
般是在JavaScript中启动脚本)

代码如下：

效果图如下：

7.提交按钮

<inputtype=“submil”>定义用于向表单出来程序提交表单的按钮,

表单处理程序通常包含用来处理输入数据的脚本的服务器页面。

注意:省略了提交按钮的value属性，该按钮将显示默认文本“提交”

代码如下：

效果图如下：

 

8.重置按钮
<input type=“reset”>定义用于重置按钮。重置按钮会清除表单中的所有数据
注意:省略提交按钮的value属性，该按钮将显示默认的文本“重置”。

代码如下：

效果图如下：

9.文件上传
<input type=”file”>定义输入字段和“浏览”按钮，供文件上传。

代码如下：

效果图如下：