html中的表单元素总结
2015-07-09 11:38
666 查看
form、input、button——制作基本的表单;
form的action属性——制定表单数据发送到的url;
form的enctype属性——指定传送给服务器的表单数据采用的编码方式;
form或input的autocomplete属性——控制自动完成功能;
form的target属性——为服务器的反馈信息指定显示位置;
form的name属性——指定表单的名字;
label——为input元素添加说明标签;
input的autofocus属性——载入表单后自动聚焦于某input元素;
input的disabled属性——禁用单个input元素;
fieldset——对input元素编组;
legend——为fieldset元素添加说明标签;
fieldset的disabled属性——禁用一组input元素;
button的type="submit"——用button元素提交表单;
button的type="reset"——用button元素重置表单;
button的button="button"——用button元素表示一般的按钮控件;
input或其他表单元素的form属性——将与表单相关的元素与并非其祖元素的form元素挂钩;
input元素的特性:
input的size属性——设置input的大小;
input的maxlength属性——设置input的容量;
input的value属性——为input设置初始值;
input的placeholder属性——为input设置关于所需数据类型的提示(html5);
input的list属性和datalist元素——提供一批建议值供用户选择(html5);
input的readonly属性——生成只读的input元素;
input的disable属性——生成被禁用的input元素;
使用password型input——隐藏用户输入的字符;
使用submit、reset或button型input——用input生成按钮;
使用number型input——将输入内容限制为数值(html5,目前浏览器支持不够好);
使用range型input——将输入内容限制在一个数值范围(html5,目前浏览器支持不够好);
使用checkbox型input——复选框;
使用radio型input——单选钮;
使用email、tel或url型input——将输入内容限制为特定格式的字符串(html5,目前浏览器支持不够好);
使用datetiem、datetime-local、date、month、time或week型input——将输入内容限制为时间或日期(html5,目前浏览器支持不够好);
使用color型input——让用户选择一种颜色(html5,目前浏览器支持不够好);
使用search型input——让用户输入一个搜索用词(html5,目前浏览器支持不够好);
使用hidden型input——生成隐藏的input;
使用image型input——生成用来提交表单的图像按钮;
使用file型input,并将form元素的enctype属性设置为multipart/form-data——上传文件到服务器;
其他表单元素及输入验证:
select及option——生成一系列选项供用户选择;
optgroup——对select元素中的选项编组;
textarea——获取用户输入的多行文字;
output——表示计算结果(html5,目前浏览器支持不够好);
keygen——生成公开/私有密钥对(html5,目前浏览器支持不够好);
required属性——确保用户为表单元素提供了一个值(html5,目前浏览器支持不够好);
min和max属性——确保输入值处于一个范围内(html5,目前浏览器支持不够好);
pattern属性——确保输入值匹配一个正则表达式(html5目前浏览器支持不够好);
novalidate或formnovalidate属性——禁用输入验证;
form的action属性——制定表单数据发送到的url;
form的enctype属性——指定传送给服务器的表单数据采用的编码方式;
form或input的autocomplete属性——控制自动完成功能;
form的target属性——为服务器的反馈信息指定显示位置;
form的name属性——指定表单的名字;
label——为input元素添加说明标签;
input的autofocus属性——载入表单后自动聚焦于某input元素;
input的disabled属性——禁用单个input元素;
fieldset——对input元素编组;
legend——为fieldset元素添加说明标签;
fieldset的disabled属性——禁用一组input元素;
button的type="submit"——用button元素提交表单;
button的type="reset"——用button元素重置表单;
button的button="button"——用button元素表示一般的按钮控件;
input或其他表单元素的form属性——将与表单相关的元素与并非其祖元素的form元素挂钩;
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>上海远地资产管理有限公司</title> <base href="http://www.shydzc.com/" target="_blank"/> <meta name="author" content="jason"/> <meta name="description" content="上海远地资产管理有限公司(简称:远地资产),是一家专业的互联网金融服务平台."/> <!--另一种声明html页面所用字符编码的方法 <meta http-equiv="content-type" content="text/html charset=utf-8"/> --> <link rel="stylesheet" type="text/css" href="style.css"/> <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/> <script src="simple.js"></script> </head> <body> <form autocomplete="off" name="fruitVote" method="post" action="getForm" target="_blank"> <fieldset> <legend>Enter Your Details</legend> <p><label for="fave">Fruit:<input autocomplete="on" autofocus name="fave" id="fave"/></label></p> <p><label for="name">Name:<input autocomplete="on" disabled name="fave" id="name"/></label></p> </fieldset> <fieldset disabled> <legend>Vote for your three favorite fruits</legend> <p><label for="fave1">#1:<input name="fave1" id="fave1"/></label></p> <p><label for="fave2">#2:<input name="fave2" id="fave2"/></label></p> <p><label for="fave3">#2:<input name="fave2" id="fave3"/></label></p> </fieldset> <button type="submit">提交</button> <button type="reset">重置</button> <button type="button">返回首页</button> </form> <form id="voteForm" method="post" action="getForm"> <p><label for="vote">Vote:<input name="fave" id="vote"/></label></p> </form> <p><label for="name1">Name1:<input form="voteForm" name="fave1" id="name1"/></label></p> <button form="voteForm" type="submit">提交</button> <button form="voteForm" type="reset">重置</button> </body> </html>
input元素的特性:
input的size属性——设置input的大小;
input的maxlength属性——设置input的容量;
input的value属性——为input设置初始值;
input的placeholder属性——为input设置关于所需数据类型的提示(html5);
input的list属性和datalist元素——提供一批建议值供用户选择(html5);
input的readonly属性——生成只读的input元素;
input的disable属性——生成被禁用的input元素;
使用password型input——隐藏用户输入的字符;
使用submit、reset或button型input——用input生成按钮;
使用number型input——将输入内容限制为数值(html5,目前浏览器支持不够好);
使用range型input——将输入内容限制在一个数值范围(html5,目前浏览器支持不够好);
使用checkbox型input——复选框;
使用radio型input——单选钮;
使用email、tel或url型input——将输入内容限制为特定格式的字符串(html5,目前浏览器支持不够好);
使用datetiem、datetime-local、date、month、time或week型input——将输入内容限制为时间或日期(html5,目前浏览器支持不够好);
使用color型input——让用户选择一种颜色(html5,目前浏览器支持不够好);
使用search型input——让用户输入一个搜索用词(html5,目前浏览器支持不够好);
使用hidden型input——生成隐藏的input;
使用image型input——生成用来提交表单的图像按钮;
使用file型input,并将form元素的enctype属性设置为multipart/form-data——上传文件到服务器;
<form method="post" action="http://www.shydzc.com"> <p><label for="name5"> Name5:<input maxlength="10" id="name5" name="name5"/> </label></p> <p><label for="city5"> City5:<input size="10" id="city5" name="city5"/> </label></p> <p><label for="fave5"> Fave5:<input size="10" maxlength="10" id="fave5" name="fave5"/> </label></p> </form> <form method="post" action="http://www.shydzc.com"> <p><label for="name6"> Name6:<input placeholder="您的名字" id="name6" name="name6"/> </label></p> <p><label for="city6"> City6:<input placeholder="您的居住地" id="city6" name="city6"/> </label></p> <p><label for="fave6"> Fruit:<input value="Apple" id="fave6" name="fave6"/> </label></p> </form> <form method="post" action="http://www.shydzc.com"> <p><label for="name7"> Name7:<input placeholder="您的名字" id="name7" name="name7"/> </label></p> <p><label for="city7"> City7:<input placeholder="您的居住地" id="city7" name="city7"/> </label></p> <p><label for="fave7"> Fruit:<input list="fruitlist" id="fave7" name="fave7"/> </label></p> <button type="submit">提交</button> </form> <datalist id="fruitlist"> <option value="Apples" label="Lovely Apples"/> <option value="Oranges">Refreshing Oranges</option> <option value="Cherries"/> </datalist> <form method="post" action="http://www.shydzc.com"> <p><label for="name8"> Name7:<input value="Jason" disabled id="name8" name="name8"/> </label></p> <p><label for="city8"> City7:<input value="shanghai" readonly id="city8" name="city8"/> </label></p> <p><label for="fave8"> Fruit:<input id="fave8" name="fave8"/> </label></p> <button type="submit">提交</button> </form> <form method="post" action="http://www.shydzc.com" enctype="multipart/form-data"> <p><label for="name9"> Name7:<input value="Jason" id="name9" name="name9"/> </label></p> <p><label for="password"> Password:<input type="password" placeholder="六位密码" maxlength="6" id="password" name="password"/> </label></p> <p><label for="fave9"> Fruit:<input value="Apples" id="fave9" name="fave9"/> </label></p> <p><label for="price"> 选择价格:<input type="number" step="1" min="0" max="100" value="1" id="price" name="price"/> </label></p> <p><label for="price1"> 选择价格2:1<input type="range" step="1" min="0" max="100" value="1" id="price1" name="price1"/>100 </label></p> <p><label for="veggie"> 您是素食主义者吗:<input type="checkbox" id="veggie" name="veggie"/> </label></p> <p> <fieldset> <legend>选择你最喜爱的水果</legend> <label for="apples"> <input type="radio" checked value="apples" id="apples" name="fruit">苹果 </label> <label for="oranges"> <input type="radio" value="oranges" id="oranges" name="fruit">橘子 </label> <label for="cherries"> <input type="radio" value="cherries" id="cherries" name="fruit">橙子 </label> </fieldset> </p> <p><label for="email"> Email:<input type="email" placeholder="jason@163.com" id="email" name="email"/> </label></p> <p><label for="tel"> Tel:<input type="tel" placeholder="(xxx)-xxx-xxxx" id="tel" name="tel"/> </label></p> <p><label for="url"> 您的主页:<input type="url" id="url" name="url"/> </label></p> <p><label for="lastbuy"> 您最后一次购买:<input type="date" id="lastbuy" name="lastbuy"/> </label></p> <p><label for="color"> color:<input type="color" id="color" name="color"/> </label></p> <p><label for="search"> 搜索:<input type="search" id="search" name="search"/> </label></p> <input type="hidden" name="recordID" value="1234"/> <input type="submit" value="提交"/> <input type="reset" value="重置"/> <input type="button" value="按钮"/> <input type="file" name="filedata"/> <input type="image" src="images/xw_china.png" name="submit"/>
其他表单元素及输入验证:
select及option——生成一系列选项供用户选择;
optgroup——对select元素中的选项编组;
textarea——获取用户输入的多行文字;
output——表示计算结果(html5,目前浏览器支持不够好);
keygen——生成公开/私有密钥对(html5,目前浏览器支持不够好);
required属性——确保用户为表单元素提供了一个值(html5,目前浏览器支持不够好);
min和max属性——确保输入值处于一个范围内(html5,目前浏览器支持不够好);
pattern属性——确保输入值匹配一个正则表达式(html5目前浏览器支持不够好);
novalidate或formnovalidate属性——禁用输入验证;
<form method="post" action="http://www.shydzc.com"> <p><label for="name10"> Name10:<input value="Jason" id="name10" name="name10"/> </label></p> <p><label for="password2"> password2:<input type="password" placeholder="六位密码" maxlength="6" id="password2" name="password2"/> </label></p> <p><label for="fave10"> Favorite Fruit: <select id="fave10" name="fave10"> <option value="apples" selected label="Apples">Apples</option> <option value="Oranges" label="Oranges">Oranges</option> <option value="Cherries" label="Cherries">Cherries</option> <option value="Pears" label="Pears">Pears</option> </select> </label></p> <p><label for="fave11" style="vertical-align: top"> Favorite Fruit: <select id="fave11" name="fave11" size="5" multiple> <option value="apples" selected label="Apples">Apples</option> <option value="Oranges" label="Oranges">Oranges</option> <option value="Cherries" label="Cherries">Cherries</option> <option value="Pears" label="Pears">Pears</option> </select> </label></p> <p><label for="fave12" style="vertical-align: top"> Favorite Fruit: <select id="fave12" name="fave12"> <optgroup label="Top Choices"> <option value="apples" selected label="Apples">Apples</option> <option value="Oranges" label="Oranges">Oranges</option> </optgroup> <optgroup label="Others"> <option value="Cherries" label="Cherries">Cherries</option> <option value="Pears" label="Pears">Pears</option> </optgroup> </select> </label></p> <p> <textarea cols="20" rows="5" wrap="hard" id="story" name="story">Tell us why this is your favorite fruit</textarea> </p> <form onsubmit="return false" oninput="res.value = quant.valueAsNumber*price2.valueAsNumber"> <fieldset> <legend>价格计算器</legend> <input type="number" placeholder="数量" id="quant" name="quant"/>* <input type="number" placeholder="价格" id="price2" name="price2"/>= <output for="quant name" name="res"/> </fieldset> </form> <form method="post" action="http://www.shydzc.com" novalidate> <p><label for="name11"> name11:<input type="text" required id="name11" name="name11" pattern="^.* .*$"/> </label></p> <p><label for="password3"> password3:<input type="password" required placeholder="六位密码" maxlength="6" id="password3" name="password3"/> </label></p> <p><label for="accept"> <input type="checkbox" required id="accept" name="accept"/>Accept terms & Conditions </label></p> <p><label for="price3"> 请选择价格:<input type="number" min="0" max="100" value="1" id="price3" name="prices"/> </label></p> </form>ps:hrml5的元素需考虑是否获得主流浏览器的支持,具体可参考http://caniuse.com
相关文章推荐
- Emmet(Zen coding)HTML代码使用技巧七则
- HTML 5 拖放
- HTML中META属性详解
- html学习笔记
- innerHTML和innerText的用法(动态改变网页内容)
- 在HTML中优雅的生成PDF
- 使用document.write()输出覆盖HTML问题
- 让360浏览器使用特定的模式打开网页(HTML)
- 【XML】XML,HTML,XHTML
- HtmlParser基础教程
- HtmlParser学习系列 -- 学习总结
- HTML打开Excel文件
- HTML中调用servlet的问题(?)
- golang Html 正则
- HTML调用servlet(二)
- HTML调用servlet(一)
- html 的表格元素总结
- HTML字符实体
- html中用作文档分节的元素
- html 框架