表单基础3

最新推荐文章于 2022-10-28 09:46:58 发布

三爷麋了鹿

最新推荐文章于 2022-10-28 09:46:58 发布

阅读量342

点赞数

分类专栏： html5学习

本文链接：https://blog.csdn.net/u800820/article/details/41723773

版权

html5学习专栏收录该内容

37 篇文章 0 订阅

订阅专栏

用表格格式化表单

1.代码示例：

<form>
   <table border="0">
      <tr>
          <td align="right">First Name:</td>
          <td><input type="text" name="fmail" id="fmail"></input></td>
      </tr>
      <tr>
          <td align="right">Last Name:</td>
          <td><input type="text" name="lmail" id="lmail"></input></td>
      </tr>
      <tr>
          <td align="right" valign="top">Comments:</td>
          <td><textarea name="comments" id="comments" rows="4" cols="40"></textarea ></td>
      </tr>
      <tr>
          <td>&nbsp;</td>
          <td><input type="submit" value="Contact" ></input></td>
      </tr>
      <tr>

   </table>
</form>

select和option元素

1.select元素用于包含和配置选择列表。可配置要显示的选项数量，以及是否允许多选。

2.select元素常用属性：

属性名称	属性值	用途
size	数字	设置浏览器将显示的选项个数。若设为1，则显示为下拉列表。若选项的个数超过了允许的空间，浏览器会自动显示滚动条
multiple	multiple	设置选择列表接收多个选项。默认只能选中列表的一个选项
disabled	disabled	表单控件被禁用，不接收信息

3.option元素用于包含和配置选择列表中显示的选项。可配置选项的值以及是否预先选中。

4.option元素常用属性：

属性名称	属性值	用途
value	文本或数字字符	为选项赋值。该值可以被客户端脚本语言和服务器端程序读取
selected	selected	浏览器显示时将某一选项设置为默认选中状态
disabled	disabled	表单控件被禁用，不接收信息

label元素

1.label元素是将文本描述和表单控件关联起来的容器标记。

2.有两种方法可以在标签和表单控件之间建立关联。

将label元素作为容器来包含文本描述和HTML表单控件。注意文本标签和表单控件必须是相邻的元素。代码示例：
```
<label>E-mail:<input type="text" name="email" id="email"></label>
```
利用for属性将标签和特定HTML表单控件关联。此方法较灵活，不要求文本标签和表单控件相邻。代码示例：
```
<label for="email">E-mail:</label>
<input type="text" name="email" id="email"></input>
```

fieldest元素和legend元素

1.Fieldest元素和legend元素结合使用，从视觉上对表单控件进行分组，增强表单的可用性。

2.用fieldest分组的表单控件周围加上一些视觉线索，比如一圈轮廓或一个边框。

3.legend元素为fieldest分组提供文本描述。示例：

<fieldest>
   <legend>Billing Address</legend>
   <lable>Street:<input type="text" name="street" id="street" size="54"></lable>
   <lable>State:<input type="text" name="state" id="state" size="4"></lable>
</fieldest>