首页 > 代码库 > html5——表单元素和属性
html5——表单元素和属性
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 单选框） | 供用户选择 |
| 图像域 image | 和提交按钮的作用基本一样，单击表单被提交 |
| 文件上传域 file | 允许用户浏览本地磁盘文件，并将该文件上传到服务器 |
| 提交 submit | 提交按钮 |
| 重设 reset | 重置按钮 |
input核心属性
| checked | 设置单选框、复选框初识状态是否处于选中状态，该属性只能是checked,选中 |
| disabled | b表示该元素禁用，该元素无法获得焦点 |
| maxlength | 该属性值是一个数字，指定文本矿中允许输入的最大字符字数 |
| size | 指定该元素的宽度 |
| readonly | 文本框中的值不允许用户更改 |
| src | 指定图像域所显示图像的URL |
代码示例：
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 表单 </title> </head> <body> <form action="http://www.crazyit.org" method="get"> 单行文本框：<input id="username" name="username" type="text" /><br /> 不能编辑的文本框：<input id="username2" name="username" type="text" readonly="readonly" /><br /> 密码框：<input id="password" name="password" type="password" /><br /> 隐藏域：<input id="hidden" name="hidden" type="hidden" /><br /> 第一组单选框：<br /> <input id="color" name="color" type="radio" value="http://www.mamicode.com/red"/> <input id="color2" name="color" type="radio" value="http://www.mamicode.com/green" /> <input id="color3" name="color" type="radio" value="http://www.mamicode.com/blue"/><br /> 第二组单选框：<br /> <input id="gender" name="gender" type="radio" value="http://www.mamicode.com/male"/> <input id="gender2" name="gender" type="radio" value="http://www.mamicode.com/female" /><br /> 两个复选框：<br /> <input id="website" name="website" type="checkbox" value="http://www.mamicode.com/leegang.org" /> <input id="website2" name="website" type="checkbox" value="http://www.mamicode.com/crazyit.org" /><br /> 文件上传域：<input id="file" name="file" type="file"/><br /> 图像域：<input type="image" src="http://www.mamicode.com/images/wjc.gif" alt="疯狂Java联盟"/><br /> 下面是四个按钮：<br /> <input id="ok" name="ok" type="submit" value="http://www.mamicode.com/提交" /> <input id="dis" name="dis" type="submit" value="http://www.mamicode.com/提交" disabled="disabled" /> <input id="cancel" name="cancel" type="reset" value="http://www.mamicode.com/重填"/> <input id="no" name="no" type="button" value="http://www.mamicode.com/无动作" /> </form> </body> </html>
使用label定义标签：
标签与表单空间关联有两种方式
①隐式使用for属性：指定<label>元素的for属性值为所关联表单空间的id属性值
②显示关联：将普通文本、表单空间一起放在<label>元素内部即可
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> label元素 </title> </head> <body> <form action="http://www.crazyit.org" method="get"> <label for="username">单行文本框：</label> <input id="username" name="username" type="text" /><br /> <label>密码框：<input id="password" name="password" type="password" /> </label><br /> <input id=‘ok‘ type="submit" value="http://www.mamicode.com/登录疯狂Java联盟" /> </form> </body> </html>
列表框和下拉菜单:
用于创建列表框或下拉菜单，该元素必须要和<option>元素结合使用，属性：multiple设置是否可以多选，size 指定列表框内可以同时显示多少个列表项
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> select元素 </title> </head> <body> <form action="http://www.crazyit.org" method="post"> 下面是简单下拉菜单：<br /> <select id="skills" name="skills"> <option value="http://www.mamicode.com/java">Java语言</option> <option value="http://www.mamicode.com/c">C语言</option> <option value="http://www.mamicode.com/ruby">Ruby语言</option> </select><br /><br /><br /> 下面是允许多选的列表框：<br /> <select id="books" name="books" multiple="multiple" size="4"> <option value="http://www.mamicode.com/java">疯狂Java讲义</option> <option value="http://www.mamicode.com/android">疯狂Android讲义</option> <option value="http://www.mamicode.com/ee">轻量级Java EE企业应用实战</option> </select><br /> 下面是允许多选的列表框：<br /> <select id="leegang" name="leegang" multiple="multiple" size="6"> <optgroup label="疯狂Java体系图书"> <option value="http://www.mamicode.com/java" label="aaaaaaaa">疯狂Java讲义</option> <option value="http://www.mamicode.com/android">疯狂Android讲义</option> <option value="http://www.mamicode.com/ee">轻量级Java EE企业应用实战</option> </optgroup> <optgroup label="其他图书"> <option value="http://www.mamicode.com/struts">Struts 2.1权威指南</option> <option value="http://www.mamicode.com/ror">RoR敏捷开发最佳实践</option> </optgroup> </select><br /> <button type="submit"><b>提交</b></button><br /> </form> </body> </html>
textarea定义文本域：
cols 指定文本域的宽度；
rows 指定文本域的高度；
disabled 指定禁用该文本域
readonly 指定该文本域只读
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 多行文本域 </title> </head> <body> <form action="http://www.crazyit.org" method="post"> 简单多行文本域：<br /> <textarea cols="20" rows="2"></textarea><br /> 只读的多行文本域：<br /> <textarea cols="28" rows="4" readonly="readonly"> 疯狂Java讲义 轻量级Java EE企业应用实战 </textarea><br /> <button type="submit"><b>提交</b></button><br /> </form> </body> </html>
html5新增的属性与元素
| form属性 指定属于哪一个form | <textarea name="desc" form="addform"></textarea> |
| formaction 提交到不同的action | <input type="submit" value="http://www.mamicode.com/注册" 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 文本框下方会显示下拉菜单 |
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> list属性 </title> </head> <body> <form method="post" action="buy"> 请输入图书：<input type="text" name="name" list="books"/><br/> <input type="submit" value="http://www.mamicode.com/购买"/> </form> <datalist id="books"> <option value="http://www.mamicode.com/java">疯狂Java讲义</option> <option value="http://www.mamicode.com/ee">轻量级Java EE企业应用实战</option> <option value="http://www.mamicode.com/android">疯狂Android讲义</option> </datalist> </body> </html>
html5——表单元素和属性
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。