IT兄弟连 HTML5教程 HTML5表单 HTML表单设计2

12b83eda93744eb6b0dd6308ae931f52.jpg

 

5  隐藏域

隐藏域不会在表单中显示。如果需要在页面之间传递重要数据,则在<input>标签中设置type属性值为“hidden”建立一个隐藏域。name和value属性是必需的,用来表示隐藏域的名字和值。基本的语法格式如下所示:

<input type="hidden" name="field_name" value="field_value">  <!--  隐藏表单域  -->

 

6  多行文本域

多行文本域提供一个可以输入多行文本的区域,在该区域中没有输入字符长度的限制。在<form>标签中使用<textarea>标签制作多行文本域。基本的语法格式如下所示:

<textarea name="name" rows="value" cols="value" value="value">           <!--  多行文本域开始标记     -->

     … …                                            <!--  在多行文本域设置默认值 -->

</textarea>                                        <!--  多行文本域结束标记     -->

在该标签中使用name属性指定多行文本域的名称;通过rows和cols两个属性分别指定多行文本域中显示字符的行数和列数,单位是字符个数。

 

7  菜单下拉列表域

在<form>标签中使用<select>标签创建一个菜单下拉列表域,该标签具有multiple、name和size属性。其中multiple属性不用赋值,直接加入标签中即可使用,加入了此属性后列表域就成为可多选的列表。size属性用来设置列表的高度,默认值为1,若没有设置multiple属性,显示的将是一个下拉式的列表域。而name属性定义此列表框的名称,与前面介绍的name属性作用一样。基本的语法格式如下所示:

<select name="name" size="value" multiple>     <!--  菜单下拉列表域开始标记  -->

<option value="value" selected>选项</option>   <!--  指定列表域中第一个选项  -->

<option value="value">选项</option>       <!--  指定列表域中第二个选项  -->

     … …                                              <!--  可以指定更多的列表选项  -->

</select>                                           <!--  菜单下拉列表域结束标记  -->

<option>标签用来指定列表域中的一个选项,需要放在<select></select>标签对之间。此标签具有selected和value属性,selected属性用来指定默认的选项,value属性用来给<option>标签指定的那一个选项赋值。这个值是要传送到服务器上的,服务器正是通过调用<select>区域的名字的value属性来获得该区域选中的数据项的。

 

8  综合实例

在本例中,使用前面介绍的大部分表单内容,制作LAMP学员基本信息输出界面。代码如下所示:

e4a179d885c4477597182660c33d4f9d.png

 

本例在浏览器中的显示效果如图2所示。

8a60dc55c1fd45b7980b7965f0b9b50e.jpg

图2  HTML表单标签的演示结果

posted on 2019-10-14 08:41  老码农的一亩三分地  阅读(...)  评论(... 编辑 收藏

导航