html5——表单元素和属性

2025-01-12 技术教程

html使用表单向服务器提交请求，表单控件的主要作用就是收集用户的输入，当用户提交表单时，用户输入内容将被作为请求参数提交到远程服务器上

html原有的表单及表单控件

form属性
说明
action
指定当单击表单的确认按钮，该表单被提交到哪个地址，可以是相对/绝对地址
method
指定提交表单时发送何种类型的请求属性值可以为get post
enctype
对表单内容进行编码所使用的字符集
name
指定表单的唯一名称，建议该属性值与id属性值保持一致
target
使用哪种方式打开目标URL，该属性值可以是_blank _parent _self _top
post:传送的数据量比较大，用户在地址栏里看不到参数，安全性较高

get:直接在地址栏中输入访问地址所发送的请求

使用input元素，input元素是表单空间当中功能最为丰富，如下几种输入元素都是通过<input>元素生成

单行文本框 text
单行文本框用于接受用户的输入
密码输入框 password
密码框文字不可见
隐藏域 hidden
不接受用户输入，也不能生成可视化部分
复选框 checkbox（radio 单选框）
供用户选择
图像域 p_w_picpath
和提交按钮的作用基本一样，单击表单被提交
文件上传域 file
允许用户浏览本地磁盘文件，并将该文件上传到服务器
提交 submit
提交按钮
重设 reset

重置按钮

input核心属性

checked
设置单选框、复选框初识状态是否处于选中状态，该属性只能是checked,选中
disabled
b表示该元素禁用，该元素无法获得焦点
maxlength
该属性值是一个数字，指定文本矿中允许输入的最大字符字数
size
指定该元素的宽度
readonly
文本框中的值不允许用户更改
src
指定图像域所显示图像的URL

代码示例：

<!DOCTYPEhtml><html><head><metaname="author"content="Yeeku.H.Lee(CrazyIt.org)"/><metahttp-equiv="Content-Type"content="text/html;charset=GBK"/><title>表单</title></head><body><formaction="http://www.crazyit.org"method="get">单行文本框：<inputid="username"name="username"type="text"/><br/>不能编辑的文本框：<inputid="username2"name="username"type="text"readonly="readonly"/><br/>密码框：<inputid="password"name="password"type="password"/><br/>隐藏域：<inputid="hidden"name="hidden"type="hidden"/><br/>第一组单选框：<br/><inputid="color"name="color"type="radio"value="red"/><inputid="color2"name="color"type="radio"value="green"/><inputid="color3"name="color"type="radio"value="blue"/><br/>第二组单选框：<br/><inputid="gender"name="gender"type="radio"value="male"/><inputid="gender2"name="gender"type="radio"value="female"/><br/>两个复选框：<br/><inputid="website"name="website"type="checkbox"value="leegang.org"/><inputid="website2"name="website"type="checkbox"value="crazyit.org"/><br/>文件上传域：<inputid="file"name="file"type="file"/><br/>图像域：<inputtype="p_w_picpath"src="p_w_picpaths/wjc.gif"alt="疯狂Java联盟"/><br/>下面是四个按钮：<br/><inputid="ok"name="ok"type="submit"value="提交"/><inputid="dis"name="dis"type="submit"value="提交"disabled="disabled"/><inputid="cancel"name="cancel"type="reset"value="重填"/><inputid="no"name="no"type="button"value="无动作"/></form></body></html>

使用label定义标签：

标签与表单空间关联有两种方式

①隐式使用for属性：指定<label>元素的for属性值为所关联表单空间的id属性值

②显示关联：将普通文本、表单空间一起放在<label>元素内部即可

列表框和下拉菜单:

用于创建列表框或下拉菜单，该元素必须要和<option>元素结合使用，属性：multiple设置是否可以多选，size 指定列表框内可以同时显示多少个列表项

<!DOCTYPEhtml><html><head><metaname="author"content="Yeeku.H.Lee(CrazyIt.org)"/><metahttp-equiv="Content-Type"content="text/html;charset=GBK"/><title>select元素</title></head><body><formaction="http://www.crazyit.org"method="post">下面是简单下拉菜单：<br/><selectid="skills"name="skills"><optionvalue="java">Java语言</option><optionvalue="c">C语言</option><optionvalue="ruby">Ruby语言</option></select><br/><br/><br/>下面是允许多选的列表框：<br/><selectid="books"name="books"multiple="multiple"size="4"><optionvalue="java">疯狂Java讲义</option><optionvalue="android">疯狂Android讲义</option><optionvalue="ee">轻量级JavaEE企业应用实战</option></select><br/>下面是允许多选的列表框：<br/><selectid="leegang"name="leegang"multiple="multiple"size="6"><optgrouplabel="疯狂Java体系图书"><optionvalue="java"label="aaaaaaaa">疯狂Java讲义</option><optionvalue="android">疯狂Android讲义</option><optionvalue="ee">轻量级JavaEE企业应用实战</option></optgroup><optgrouplabel="其他图书"><optionvalue="struts">Struts2.1权威指南</option><optionvalue="ror">RoR敏捷开发最佳实践</option></optgroup></select><br/><buttontype="submit"><b>提交</b></button><br/></form></body></html>

textarea定义文本域：

cols 指定文本域的宽度；

rows 指定文本域的高度；

disabled 指定禁用该文本域

readonly 指定该文本域只读

html5新增的属性与元素

form属性指定属于哪一个form
<textarea name="desc" form="addform"></textarea>
formaction 提交到不同的action
<input type="submit" value="注册" formaction="regist">
formxxx 与formaction相似
<input type="submit" formaction="regist" formmethod="get">autofocus 获得焦点
<input type="text" autofocus>
placeholder 提示信息
<input type="text" placeholder="请输入用户名">list 必须与datalist结合使用
list用法见下
autocomplete 与list结合使用
on 打开antocomplete 文本框下方会显示下拉菜单

<!DOCTYPEhtml><html><head><metaname="author"content="Yeeku.H.Lee(CrazyIt.org)"/><metahttp-equiv="Content-Type"content="text/html;charset=GBK"/><title>list属性</title></head><body><formmethod="post"action="buy">请输入图书：<inputtype="text"name="name"list="books"/><br/><inputtype="submit"value="购买"/></form><datalistid="books"><optionvalue="java">疯狂Java讲义</option><optionvalue="ee">轻量级JavaEE企业应用实战</option><optionvalue="android">疯狂Android讲义</option></datalist></body></html>