10_定制表单元素

用input元素输入文字

type属性设置为text的input元素在浏览器显示中显示未一个单行文本框, 是未设置type值的默认形式

设置元素的大小

有两个属性能对文本框的大小产生影响, maxlength属性设定了用户能够输入的字符的最大数目, size属性则设定了文本框能够显示字符数目, 二者的字符数目均已正整数表示

设置初始值和占位式提示

可以使用value属性设置一个默认值, 还可以使用placeholder属性设置一段提示文字, 告诉用户应该输入什么类型

使用数据列表

可以将input元素的list属性设置为一个datalist元素的id属性值, 这样用户在文本框中输入数据的时候, 只需要从后一个元素提供的一批选项中进行选择就行了

datalist元素是HTML5新增的, 它可以用来提供一批值, 以便帮助用户输入需要的数据, 不同类型的input使用datalist元素的方式略有差异, 对于text型的input元素, datalist元素提供的值以自动补全建议值的方式呈现, 提供给用户选择的值个用一个options元素指定

包含在datalist元素中每一个option元素都代表一个供用户选择的值, 其value属性值在该元素代表的选项被选中的时候就是input元素所用的数据值, 显示在选项列表中的未必是options元素的value值, 还可以是另行设定的一条说明信息, 它可以用label属性设置, 也可以作为option元素的内容设置

生成只读和禁用的文本框

readonly和disabled属性都可以用来生成用户不能编辑的文本框, 其结果的外观不同

注意: 设置readonly属性的input元素外观与普通的input元素并没有什么不同的, 但是设置disabled属性的外观就有些许变化了, 设置了disabled属性的input元素数据不会被提交的服务器中, 建议使用hidden属性替代

指定文字方向数据的名称

通过设置dirname属性, 可以将用户输入文字的方向数据发送给浏览器, 该数据的值就是方向数据项的名称

用input元素输入密码

type属性这只为password用于输入密码, 用户输入的字符在这种文本框中显示为星号,之类的掩饰字符

再次过程中用户输入的内容只是显示为掩饰字符, 但是内容并不是掩饰字符

在提交表单时password型input元素不会对密码进行保护, 用户输入的值依然是明文传输, 对于安全至关重要的网站, 应该考虑SSL/HTTPS对浏览器和服务器之间的通信内容进行加密

input生成按钮

将input元素的type属性这只为button, reset, submit会生成类似于button元素那样的按钮

submit好button元素设置为submit是一致的

元素生成的按钮说明文字由value属性设置

用input元素为输入数据把关

input元素的type属性在HTML5中新增的一些值可以对用户输入的数据类型提出更具体的要求

这一系列类型的input元素中有些能用明显的视觉新高告诉用户对输入或者选择的数据有什么限制

用input元素获取数值

type属性这只为number生成输入框只接受数值, 有些浏览器还会从旁边先出来用上调和下调的数值的箭头型小按钮

max, min, step, value属性值可以是整数或者小数,

用input元素获取指定范围内的数值

获取数值的另外一种办法是使用range型input元素, 用户只能用它从事先规定的范围内选择一个数值, range型input元素支持的属性与number型相同, 但是二者在浏览器中的显示结果不同

用input元素获取布尔型的输入

checkbox型的input元素会生成供用户选择是或否的复选框

checkbox型input元素的不足之处在于: 提交表单的时候, 只有处于勾选状态的复选框才会被发送到服务器

用input元素生成一组固定选项

radio型input元素可以用来生成一组单选按钮, 供用户从一批固定的选项中做出选择, 它适合于可用有效数据不多的情况下

每一个radio型input元素代表着提供给用户的一个选项, 要生成一组互斥的选项, 只需要将所有相关input元素的name属性设置为同一个即可

如果单选按钮中没有一个值被选中, 那么并不会被发送到服务器

用input元素获取有规定格式的字符串

type属性设置为email, tel, url的input元素能接受的输入数据分别是有效的电子邮件地址, 电话号码, URL,

email类型还支持一个名为multiple的属性, 设置了该属性的input元素可以接受多个电子邮箱地址,

这三种input元素都显示为普通文本框的样子, 它们只有在提交的时候才会检查用户输入的内容, 这是HTML5中新增的输入数据检查功能之一, 至于检查效果则各有不同

用input元素获取时间和日期

HTML5中增加了一些input元素的新类型, 供用户输入日期和时间

日期和时间是出了名的难缠问题, 在实际使用中用户使用者也会搞不懂

用input元素获取颜色

color类型只用用来获取颜色, 还支持list属性

这种类型中的颜色值是十六进制表示

用input元素获取搜索用词

search类型生成一个单行文本框, 供用户输入搜索用词, 其实和普通文本框没什么不同

用input元素生成隐藏的数据项

有时候设计者会希望使用一些用户看不到或者不同编辑的数据项, 但是有要求提交表单的时候也能将其发送给服务器, 这个时候使用hidden类型就可以达到这个目的

提示: 只有那些处于方便或者易用性考虑而不是因为机密或者涉及安全原因需要隐藏的数据才适合使用这种input元素, 而且该元素的值是以明文的形式发送给服务器的

用input元素生成图像按钮和分区响应图

image性input元素生成的按钮为一幅图像, 点击它可以提交表单

点击按钮图像按钮会桃枝浏览器提交表单, 在发送的数据中包括来自那个image性input元素的两个数据项, 分别代表用户点击位置相对于图像左上角的x坐标和y坐标

由于这个过程中可以得到点击位置和坐标信息, 所以可以让图像中的不同区域代表着不同的操作, 然后根据用户在图像上点击位置做出相应的反应

用input元素上传文件

最后一种input元素类型是file类型, 它可以在提交表单的时候将文件上传到服务器,

表单编码类型为multipart/form-data的时候才能上传文件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值