html中的表单元素总结

来源：互联网发布：se壳网络验证编辑：程序博客网时间：2024/05/17 00:07

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元素挂钩；

<!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

0 0