CSS表单元素样式设置

(1)表单由两部分组成,访问者在页面上可看见并填写的控件、标签和按钮的集合,以及用于获取信息并将其转化为可以读取或计算的的格式的处理脚本。

(2)表单创建,以form标签开始结束,开始和结束form标签之间是组成表单的标签控件按钮form开始标签最重要的两个属性值,actionmethodaction属性的值设为访问者提交表单时服务器上对数据进行处理的脚本的URLmethod属性值要么是get要么是post。可设置novalidate来关闭表单的HTML5验证特性。get方法表单提交后,表单中的数据会显示在浏览器的地址栏,希望表单提交后从服务器得到信息就使用get,post方法表单数据提交后不会出现在浏览器地址栏,可向服务器发送更多的数据。

(3)处理表单,后台完成,必须考虑将服务器端的验证加入表单处理脚本。

(4)对表单元素进行组织,使用fieldset元素实现,legend元素可为fieldset元素提供标题.

(5)创建文本框,<input type="text",可设置label,可设置name用于让服务器识别识别输入数据的文本。value=default可设置初始值,autofocus此元素加载后默认获得焦点,size=n定义文本框的大小n是宽度以字符为单位,maxlength="n"设置文本框允许输入的最大字符数,autocomplete="off"可根据输入记录提供可选择项自动填充。label标签有一个特殊属性for,for的值与一个表单字段的id值相同时,该label就与字段显式的关联了起来,这时点击标签,输入框将获得焦点,或点击标签选中复选框。让idforname属性的值都一样是一种并非必须但很常见的做法。forid的值一定要一样。input的类型可为textpasswordradiocheckboxemailurltelsearchfile上传文件、hidden设置字段隐藏等,其中可使用pattern属性通过正则表达式定制校验规则。使用复选框时,标签文本label不一定和value值保持一致,因value是发送到后台的值。

(6)选择框<label/><select><option>其中设置size=n属性,这里n代表选择框的高度,multiple="multiple"设置为多选框,selected="selected"设置某个选项默认被选中,在select标签中使用<optgroup label="">可设置

(7)给input添加disabledreadonly属性可设置其值不可修改,<input type="submit" value="create profile" >可定义提交按钮。可设置带有图标的按钮,<input type="image" src="image.url"/>。使用<button>元素可创建包含其他元素的按钮。<input type="reset">表单还有重置按钮。根据表单状态设置其样式,使用的是CSS3提供的伪类,有:focus:checked:disabled:enable:required:optional:invalid等。设置样式如input:focus{background-color:yellow}

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值