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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/ITXDL123/article/details/102540989

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学员基本信息输出界面。代码如下所示:

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券