第16章 表单

2018-03-01 18:26:33 《HTML5与CSS3基础教程》笔记 阅读: 261

表单的起源比js还要早,功能也已经很完善了,兼容性也很好。通过表单,网站管理员可以和用户进行交互。

创建表单

使用form标签创建表单,并设置method和action属性

method属性值post或get,post用于向服务器提交数据,get会向服务器提交并将返回的数据显示在浏览器地址栏

action属性是表单提交后服务器上用于处理的脚本的url

如:

...
这个表单使用post方式上传数据,服务器上用于处理的脚本为save.php

组织表单元素

使用fieldset标签将表单中相关的元素包含为一个组,使之更容易组织和理解。

还可以在fieldset标签中使用legend标签添加标题(会显示在浏览器),用于描述每个组的目的。

fieldset默认会显一个边框线,legend会显示在边框左上角

创建输入框

使用input标签并将type属性值设为text创建输入框

输入框有如下属性可以使用

提交到服务器的识别标志:name="dataname"
与label进行关联:将laber标签的for值与input标签的id值设置相同即可
(可选)输入框初始文本:value="default"
(可选)提示文本:placeholder
(可选)非空不能提交:required="required"
(可选)自动获得焦点:autofocus或autofocus="autofocus"
(可选)文本大小:size="n", n为字符个数(默认为20)
(可选)输入限制:maxlength="n", n为允许输入的最多字符个数
(可选)关闭自动完成:autocomplete="off"(此属性可运用于整个form标签)
注意:input标签无结束标签

创建说明标签

使用label创建说明标签

使用for属性可以关联相关的表单字段,使之点击label时关联的字段会获取焦点(试试点击上面的文本框前面的文本)。

关联方法:将for值设为要关联字段元素的id

创建密码框

使用input标签并将type属性值设为password创建输入框

其属性和输入框相同

创建电子邮件框

使用input标签并将type属性值设为email创建电子邮件框

其属性和输入框相同

浏览器会自动验证邮箱的有效性(格式)

创建搜索框

使用input标签并将type属性值设为search创建搜索框

其属性和输入框相同

创建电话框

使用input标签并将type属性值设为tel创建电话框

其属性和输入框相同

创建URL框

使用input标签并将type属性值设为url创建url框

其属性和输入框相同

创建单选按钮

使用input标签并将type属性值设为radio创建电话框

设置好如下属性:

name="radioset" 同上面一样,name是用来设置识别数据的, 同一组的name应该设为相同
id="label-id" id值应该和相关联的label的for值一样
value="data" 按钮被选中时发送到服务器的文本
checked或checked="checked" 一组按钮中默认被选中的
最后创建label文本用于识别该按钮

创建复选框

使用input标签并将type属性值设为checkbox创建电话框

属性设置和单选框相同

创建文本区域

使用textarea标签创建文本区域
设置好如下属性:

id="label-id" id值应该和相关联的label的for值一样
name="radioset" 同上面一样,name是用来设置识别数据的
cols="n" 文本区域的宽度,单位是字符
rows="n" 文本区域的高度,单位是字符
开始标签和结束标签之间的内容即是初始文本内容
(可选)maxlength="n" 可输入最大的字符数

创建选择框

使用select标签创建选择框

设置好如下属性:

id="label-id" id值应该和相关联的label的for值一样
name="radioset" 同上面一样,name是用来设置识别数据的
(可选)size="n" 选择框高度,单位为行
使用option标签创建选择框选项,并设置好如下属性:

value="option-value" 值会发送到服务器
(可选)selected="selected" 设置此选项为默认选中
使用optgroup标签对选项进行分组,只要将标签包含要分组的option标签即可,并且可以使用label属性添加分组说明

例子 你最喜欢的运动?

创建文件上传

使用input标签并将type属性值设为file创建文件选择按钮

设置好如下属性:

id="label-id" id值应该和相关联的label的for值一样
name="dataname" 同上面一样,name是用来设置识别数据的
(可选)size="n" 文件全路径长度
(可选)multiple或multiple="multiple" 设置可以上传多个文件
例子 选择文件: 选择文件

创建隐藏字段

使用input标签并将type属性值设为hidden创建隐藏字段(隐藏字段不会显示在浏览器中)

设置好如下属性:

name="dataname" 同上面一样,name是用来设置识别数据的
value="data" 要提交的信息本身
创建提交按钮

使用input标签并将type属性值设为submit创建提交按钮

使用value值设置显示在按钮上的文本

使用图像作为提交按钮:

例子 description

使用图像和文本作为提交按钮:

使用button标签将type属性设为submit,并包围使用img标签和文字即可

禁用表单元素

对要禁用的元素使用disabled属性即可,之后可以通过js将表单元素改为可用。

根据状态设置样式

使用伪类选择

  • :focus 获得焦点的字段
  • :checked 选中的单选按钮或者复选框
  • :disabled 禁用的字段
  • :enable 可用的字段
  • :required yourequired的字段
  • :option 和required相反
  • :invalid 值与pattern不匹配的字段
  • :valid 与invalid相反

版权声明:本文为博主原创文章,转载需注明来自: 洛洛の空间


功能
最新评论