html中的表单元素总结

原创 2015年07月09日 11:38:13

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

html中表单使用总结

html中表单使用总结  1.表单的标准格式:                           其中method的值可以使get或者是post 区别在于get请求时,数据大小不能超...
  • aozeahj
  • aozeahj
  • 2016年10月26日 20:53
  • 780

HTML表单总结

一 HTML 表单标签 标签 描述   定义供用户输入的表单   定义输入域   定义文本域 (一个多行的输入控件) 定义了 元素的标签,一般为输入标题   定义了一组相关的表单元素,并使...
  • bcbobo21cn
  • bcbobo21cn
  • 2015年05月17日 15:02
  • 506

html表单总结小笔记

表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。 所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在标签之间。 1. :标签是成对出现的,...
  • preless
  • preless
  • 2016年06月16日 16:19
  • 240

HTML表单总结

1:表单的重定向我是个HTML初学者,有时连很多低级的问题都不知道怎样处理,比如今天在一个项目中遇到一个十分简单的问题——表单提交后需要让页面重定向,我就忙活了大半天,最后上网一查,才知道原来是这样提...
  • biologypianoprogram
  • biologypianoprogram
  • 2009年04月24日 10:31
  • 784

HTML5表单标签及标签属性总结

目标: 1、列出所有的表单标签 2、总结每个标签的用途以及标签的常用属性PS:表单主要用于收集用户的信息一、表单的标签 1、form 表示HTML表单 2、input 表示用来收集用户输入...
  • MRname
  • MRname
  • 2016年02月26日 09:37
  • 3016

html5篇——新增表单元素和表单属性

这一篇介绍html5新增的表单元素和表单属性。 首先先说一个html5中表单新增的一个功能,在我们之前的html中,表单元素必须放在form元素所包含的里面,在html5中,可以把他们写在页面上的任何...
  • u010556394
  • u010556394
  • 2016年03月08日 12:52
  • 4958

html表单总结小笔记

表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。 所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在标签之间。 1. :标签是成对出现的,...
  • preless
  • preless
  • 2016年06月16日 16:19
  • 240

html5基础知识第三章表单

以下内容是学习期间整理,有些语句是便于理解,便于快速入门写的。并不权威。 表单是灰常重要的内容;灰常重要的内容;灰常重要的内容;重要的事情说三遍。表单直接与后台挂钩,想现在的登入界面都是用表单提...
  • qq_19558705
  • qq_19558705
  • 2015年11月14日 12:02
  • 4941

最常用的HTML标签 总结整理

body:在网页上要展示出来的页面内容一定要放在body标签中 p:如果想在网页上显示文章,这时就需要p标签了,把文章的段落放到p标签中。标签的默认样式,段前段后都会有空白,如果不喜欢这个空白,可以用...
  • fang323619
  • fang323619
  • 2016年07月14日 08:41
  • 2246

HTML一些常用的表单元素

HTML一些常用的表单元素 普通文本框 密码输入框 复选框 单选框,属性name设置相同 ...
  • probelover
  • probelover
  • 2017年08月02日 10:48
  • 622
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html中的表单元素总结
举报原因:
原因补充:

(最多只允许输入30个字)