设计表单样式

参考书籍《HTML+CSS+JavaScript从入门到精通》

语法:

完整的表单结构:

表单框:<form>,属性,action:设置数据提交至服务器的目标页面,当属性值为#时表示为当前页面

enctype:定义发送表单数据HTTP字符编码格式,属性值为application/x-www-form-urlencoded,默认值,数据编码为名称/值对的形式发送至服务器。

multipart/form-data:将表单中数据编码为一条消息,表单中有上传组件时,设置属性值是必须的,不过上传组件一般为非文本文件,例如jpg\rar\mp3等。

text/plain:将表单中的数据以纯文本方式进行编码,发送邮件必须使用该编码类型,否则会出现接收编码时混乱的情况。

method:发送表单数据的HTTP请求方式,主要包括两种方式,post\get。get方法传输的数据量少,执行效率高,在浏览器地址中可以看到提交的查询字符串;post方法传输的数据量多,无法通过浏览器地址查看提交的数据,适合传输重要信息。

输入框:

<input>

maxlength:输入字符的最大长度,整数值,最小为0;value:表示输入框的默认值;size:表示输入框的宽度,一般用CSS的width值代替;readonly:表单对象只读状态;disabled,定义对象为不可用状态。

type属性,属性值:hide(隐藏区域,value值为传输到服务器的数据);type="file",将文件以二进制数据的形式上传到服务器;text/checkbox/image/password/radio/submit:单行文本/复选框/定义图像作为提交按钮/密码/单选按钮/提交按钮,定义checked属性定义默认选择项。

<textarea>文本区域可以允许用户输入大容量信息,主要应用于用户留言或者聊天窗口中。

<select>标签和<option>配合使用可以设计下拉菜单或者列表框,<select>标签包含<option>标签或<optgroup>(选项分类)标签,使用select属性定义默认选项,multiple,定义下拉菜单可以多选。

<fieldset>为表单对象进行分组,默认状态下,区域分组外面会显示一个包围框,<legend>定义每组的标题,默认显示在<fieldset>包含框的左上角。

<lable>和<input>配合使用,则点击lable标签中提示字时光标也会聚焦在<input>标签内,注意lable中for的值应该等于input中id的值。

定义样式:

部分表单对象是构造复杂的控件,不易使用CSS修饰,需要用JS实现。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章