千呼万唤 HTML 5 (7) - 表单元素

最新推荐文章于 2024-10-04 22:04:56 发布
最新推荐文章于 2024-10-04 22:04:56 发布
阅读量601 收藏
点赞数
分类专栏： HTML 文章标签： html input button email output 正则表达式

原文地址：http://www.cnblogs.com/webabcd/archive/2012/02/08/2342275.html

作者：webabcd



介绍
HTML 5: 表单元素

  • 表单元素 - form, label, button, select, option, optgroup, datalist, textarea, fieldset, legend, progress, meter, keygen, output
  • 表单验证



示例
1、form - 表单
element/form/form.html

<!doctype html>
<html>
<head>
    <title>form</title>
</head>
<body>

    <!--
        form - 表单，用于提交子元素数据到服务端
          accept-charset - 指定提交数据的编码格式
          action - 提交的目标地址
          autocomplete - 是否对所有子元素启用自动完成功能（on 或 off）
          enctype - 编码类型（application/x-www-form-urlencoded 或 multipart/form-data 或 text/plain）
          method - form 的 method（默认是 GET）
          name - form 的 name
          novalidate - 提交时是否不需要验证，boolean 类型
          target - form 的 target
    -->

    <form action="#">
        <input type="text" name="txt" value="webabcd" />
        <input type="submit" name="btn" value="submit" />
    </form>

</body>
</html>
复制代码


2、label - 关联其它元素
element/form/label.html

<!doctype html>
<html>
<head>
    <title>label</title>
</head>
<body>

    <!--
        label - 关联其它元素
          form - 指定 label 所属的表单，多个用空格分开
          for - 关联元素的 id

        DOM
          form, htmlFor
          control - 返回 label 所关联的元素
    -->

    <label><input type="checkbox" /> checkbox title</label>

    <br />

    <input id="chk" type="checkbox" />
    <label id="lbl" for="chk">checkbox title</label>

    <script type="text/javascript">
        var lbl = document.getElementById("lbl");
        alert(document.getElementById("lbl").htmlFor);
        alert(document.getElementById("lbl").control.outerHTML);
    </script>
</body>
</html>
复制代码


3、button - 按钮元素
element/form/button.html

<!doctype html>
<html>
<head>
    <title>button</title>
</head>
<body>

    <!--
        button - 按钮元素
          autofocus - 页面加载后是否自动置为焦点，boolean 类型
          disabled - 是否无效，boolean 类型
          form - 指定关联的 form 的 id
          formaction - 指定关联 form 的 action
          formenctype - 指定关联 form 的编码类型
          formmethod - 指定关联 form 的 method
          formnovalidate - 指定关联 form 在提交时是否不需要验证，boolean 类型
          formtarget - 指定关联 form 的 target
          type - 按钮类型（button 或 submit 或 reset）
    -->
    
    <button type="button">button</button>

</body>
</html>
复制代码


4、select - 下拉列表框元素, option - 选项, optgroup - 选项组
element/form/select_option_optgroup.html

<!doctype html>
<html>
<head>
    <title>select option optgroup</title>
</head>
<body>
    <!--
        select - 下拉列表框元素
          autofocus, disabled, form, name, required, size
          multiple - 是否可多选，boolean 类型

        option - 选项
          disabled, label, selected, value

        optgroup - 选项组
          disabled, label
    -->

    <select>
        <option value="1" label="aaa" />
        <option value="2" label="bbb" />
        <option value="3" label="ccc" selected />
        <option value="4" label="ddd" />
        <option value="5" label="eee" />
    </select>

    <select multiple>
        <option value="1">aaa</option>
        <option value="2">bbb </option>
        <option value="3" selected>ccc</option>
        <option value="4" selected>ddd</option>
        <option value="5">eee </option>
    </select>

    <select>
        <optgroup label="optgroup 1">
            <option value="1">aaa</option>
            <option value="2">bbb </option>
        </optgroup>
        <optgroup label="optgroup 2">
            <option value="3">ccc</option>
            <option value="4">ddd </option>
        </optgroup>
        <optgroup label="optgroup 3">
            <option value="5" selected>eee</option>
            <option value="6">fff </option>
        </optgroup>
    </select>
</body>
</html>
复制代码


5、datalist - 数据列表元素, option - 数据项
element/form/datalist_option.html

<!doctype html>
<html>
<head>
    <title>datalist option</title>
</head>
<body>

    <!--
        datalist - 数据列表元素
        option - 数据项
          value - 数据项的值
          label - 数据项的说明
    -->

    <input type="email" list="contacts" />

    <datalist id="contacts">
        <option value="aabb@aa.com" label="张三" />
        <option value="ccdd@cc.com" label="李四" />
        <option value="eeff@ee.com" label="王五" />
    </datalist>

</body>
</html>
复制代码


6、textarea - 文本区域元素
element/form/textarea.html

<!doctype html>
<html>
<head>
    <title>textarea</title>
</head>
<body>

    <!--
        textarea - 文本区域元素
          autofocus, dirname, disabled, maxlength, name, placeholder, readonly, required - 参考 /element/form/input/_attributes.html
          cols - 显示的列数（单位：字符数）
          rows - 显示的行数（单位：字符数）
          wrap - 换行方式
            soft - 需要换行则换行（相当于 wrap）
            hard - 强制不换行（相当于 nowrap）
    -->
    
    <textarea cols="3" rows="3">
aaabbbccc
    </textarea>

</body>
</html>
复制代码


7、fieldset - 用于定义一个区域, legend - 用于定义一个区域的标题，它是 fieldset 的第一个子元素 
element/form/fieldset_legend.html

<!doctype html>
<html>
<head>
    <title>fieldset legend</title>
</head>
<body>

    <!--
        fieldset - 用于定义一个区域
          form - 指定所属表单，多个用空格分开
          disabled - 是否无效（Opera 支持此标准）

        legend - 用于定义一个区域的标题，它是 fieldset 的第一个子元素 
    -->

    <fieldset disabled>
        <legend>
            <label>
                <input type="checkbox" /> title
            </label>
        </legend>
        <p>
            p1
        </p>
        <p>
            p2
        </p>
        <p>
            p3
        </p>
    </fieldset>
</body>
</html>
复制代码


8、progress - 进度元素 
element/form/progress.html

<!doctype html>
<html>
<head>
    <title>progress</title>
</head>
<body>
    <!--
        progress - 进度元素
          value - 当前进度值
          max - 进度的最大值
          form - 对应的 form 的 id
    -->

    <progress id="progress" max="100"></progress>

    <script type="text/javascript">
        var progressBar = document.getElementById('progress');
        progressBar.value = 10;
    </script>

</body>
</html>
复制代码


9、meter - 用来表示一个范围已知且可度量的值 
element/form/meter.html

<!doctype html>
<html>
<head>
    <title>meter</title>
</head>
<body>

    <!--
        meter - 用来表示一个范围已知且可度量的值
          form - 对应的 form 的 id
          value - 当前值
          min - 最小值
          max - 最大值
          low - 低水平的值
          high - 高水平的值
          optimum - 最适宜的值
    -->
    
    <span>血糖含量：</span>
    <meter value="60" min="0" max="100" low="20" high="80" optimum="50" />

</body>
</html>
复制代码


10、keygen - 呈现出一个键值对生成器，提交表单后，公钥发往服务端，私钥保存在客户端
element/form/keygen.html

<!doctype html>
<html>
<head>
    <title>keygen</title>
</head>
<body>
    
    <!--
        keygen - 呈现出一个键值对生成器，提交表单后，公钥发往服务端，私钥保存在客户端
          autofocus, challenge, disabled, form, keytype
    -->

    <keygen />

</body>
</html>
复制代码


11、output - 用于呈现计算结果
element/form/output.html

<!doctype html>
<html>
<head>
    <title>output</title>
</head>
<body>

    <!--
        output - 用于呈现计算结果（必须要有起始和结束标记）
          form, name
          for - 关联元素的 id，可以有多个
    -->
    
    <output id="output"></output>

    <script type="text/javascript">

        document.getElementById("output").value = 10 * 10;

    </script>

</body>
</html>
复制代码


12、表单验证
element/form/_validate.html

<!doctype html>
<html>
<head>
    <title>表单验证</title>
</head>
<body>

    <!--
        表单验证（Opera  支持此标准）

        required - 指定是否为必填元素
        pattern - 用指定的正则表达式对 input 的值做验证
        url, email, number 等有验证功能的元素

        element.validity - 返回验证状态，ValidityState 对象
        ValidityState - 验证状态对象
          valid - 是否通过了验证（以下 8 个值都为 false，则此值为 true），boolean 类型
          valueMissing - 是否没有值（对应的元素如果设置为必填但没有值的时候，此值为 true），boolean 类型
          typeMismatch - 是否值的类型与期望类型不匹配，boolean 类型
          patternMismatch - 是否正则表达式验证失败，boolean 类型
          tooLong - 是否字符过多，boolean 类型
          rangeUnderflow - 是否比预设的最小值还要小，boolean 类型
          rangeOverflow - 是否比预设的最大值还要大，boolean 类型
          stepMismatch - 是否不匹配 step 的设置（比如 step 为 3，那么如果值要匹配 step 的话，则一定要为 3 的倍数），boolean 类型
          customError - 是否有自定义错误信息，boolean 类型

        element.setCustomValidity("错误信息") - 用于指定自定义的错误信息
        element.setCustomValidity("") - 用于清除自定义的错误信息
    -->

    <form action="#">
        <input type="text" name="txt" id="txt" required />
        <input type="email" name="email" id="email" />
        <input type="submit" name="btn" value="submit" />

        <br />
        <input type="button" value="验证 email 元素" onclick="validateEmail();" />
    </form>

    <script type="text/javascript">

        function validateEmail() {
            var email = document.getElementById("email");
            var validityState = email.validity;

            alert
            (
                validityState.valid + "\n" +
                validityState.valueMissing + "\n" +
                validityState.typeMismatch + "\n" +
                validityState.patternMismatch + "\n" +
                validityState.tooLong + "\n" +
                validityState.rangeUnderflow + "\n" +
                validityState.rangeOverflow + "\n" +
                validityState.stepMismatch + "\n" +
                validityState.customError
            );
        }

    </script>

</body>
</html>
复制代码



OK
[源码下载]


scoliver
关注
专栏目录
东吴证券-固态电池行业深度：千呼万唤始出来，犹抱琵琶半遮面-230429.pdf
06-21
半固态电池技术先行，2023年开启小批量装车发布，全固态电池仍需5-10年实现商业化。半固态电池兼具安全性、能量密度和经济性，率先进入产业化阶段，已率先切入无人机等高端消费领域。2023年，蔚来、上汽、东风、赛力...
东吴证券-固态电池行业深度：千呼万唤始出来，犹抱琵琶半遮面-230604.pdf
06-19
固态电池作为一种新兴的电池技术，正逐渐受到全球科研机构和产业界的广泛关注。与传统的液态电解质电池相比，固态电池拥有更高的能量密度、更好的安全性以及更长的使用寿命，被视为未来电动车和可穿戴设备等领域的...
3.HTML5表单
小马Mark的博客
06-22 154
HTML5新增的表单属性 from标记的新属性 autocomplete属性 autocomplete：on|off 属性规定form标记或类型为text、search、url、tel、email、password、date pickers、range、color的input标记是否具有自动完成的功能 效果：当表单元素设置了自动完成功能后，会记录用户输入过的内容，双击表单元素会显示历史输入 novalidate属性 novalidate：true|false 属性规定在提交表单时不进行验证form或
千呼万唤 HTML 5 (6) - 表单元素之 input 元素
scoliver的专栏
03-08 805
原文地址：http://www.cnblogs.com/webabcd/archive/2012/02/06/2339534.html 作者：webabcd 介绍 HTML 5: 表单元素之 input 元素 表单元素之 input 元素 - text, password, url, telephone, email, search, file, radio, ch
HTML_01_基础
pre_eminent的JAVA学习园地
03-05 991
HTML 指超文本标签语言,英文全称是HyperText Markup Language。HTML发展史HTML没有1.0，因为关于它的初版存在争议，1995年HTML 2.0横空出世，1997年由国际官方组织W3C隆重推出了HTML 3.2以及HTML 4.0标准，后面W3C(万维网联盟)也渐渐变成Web技术领域的权威，经过漫长岁月的演变，2014年，时隔15年之后, HTML 5  标准在人们...
分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(2月13日-2月19日)
Kevin Fan
02-22 1619
分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(2月13日-2月19日) 本周Silverlight学习资源更新 Silverlight 编写Json查看器(JsonViewer) Hunter.Wei Silverlight 设计器错误解决办法! NatureSexy Silverlight
HTML语言教程(完整版)
热门推荐
Weeds的博客
01-15 1万+
第一章 HTML概述与基本结构                 一、HTML 的概述            HTML的英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作.协议的制定使浏览器在运行超文本时有了统一的规则和标准.用HTML编
获取DOM元素方法小结
letterTiger的博客
03-28 1214
在开发中不可避免的需要操作DOM，现在就来总结一下原生的获取DOM的API。 getElementById、querySelector、querySelectorAll、getElementsByCalssName这些方法有的只能在document上调用有的返回一个HTMLCollection集合。本文就来简单总结一下这些知识点。
HTML最给力的入门教程
yishui50的专栏
10-16 3913
第一章 HTML概述与基本结构      一、HTML的概述                                                                                                                            HTML的英语意思是：HypertextMarked Language，即超文本标
我(webabcd)的文章索引
hong2511的博客
07-27 378
[最后更新：2018.01.15] 背水一战 Windows 10 系列文章 背水一战 Windows 10 (1) - C# 6.0 新特性 背水一战 Window
javascript DOM BOM 笔记
喵喵的博客
07-09 961
Web API API的概念 API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。 任何开发语言都有自己的API API的特征输入和输出(I/O) API的使用方法(console.log()) Web API的概念 浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM) 此处的Web API特指浏览器提供的API(一
中国细胞治疗产业研究(一)：千呼万唤始出来，犹抱琵琶半遮面.pdf
07-17
7. 中国医疗行业的技术迭代加速 随着创新技术的不断涌现，中国医疗行业正在进入一个技术迭代加速的新时期。新技术如CAR-T疗法、微生物群创新型疗法、单克隆抗体、双特异性抗体以及基因治疗等，都预示着中国创新药与...
HTML详解
gopher9511的博客
10-04 1076
HTML 基础 HTML 标题 HTML 段落 HTML 链接 HTML 图片 HTML 元素 HTML 注释 HTML 属性 HTML 文本格式化 HTML 头部 HTML css HTML 表格 HTML 列表 HTML 自定义列表 HTML 区块 HTML 表单 HTML 框架 HTML 颜色 HTML 脚本 HTML 事件 HTML 实体 HTML url HTML5 新元素 新元素 新元素 新元素 新元素 新元素 新元素 新表单元素 新元素 uotput 新属性 新的语义和结构元
html中的文本标签(含标签的实现案例)
2301_76862031的博客
10-01 1029
html中常用的标签h,p,hn,hr,br,font,time,mark,cite,特殊字符标签，图像标签
【移动端】Viewport 视口
最新发布
小秀的博客
10-04 1225
（视口）是指浏览器中用户可见的那部分网页内容的区域，简单来说，它是用户当前看到的网页的“窗口”区域。在不同的设备上，Viewport 的大小会有所不同。
HTML&&CSS练习
bruce_devil的博客
10-04 459
【代码】HTML&&CSS练习。
【工欲善其事】巧用 Sublime Text 生成带格式的 HTML 片段
PeacefulWinter的博客
09-30 1439
本文介绍了 Sublime Text 自定义代码片段的操作技巧，非常适合需要快速输入一系列高度格式化的文本内容。配合大量截图，可以快速掌握该技巧，提升日常工作效率。
kotlin所需的依赖库
07-27
- *2* *3* [千呼万唤始出来，Kotlin官方序列化库终相见(一)](https://blog.csdn.net/weixin_55362248/article/details/121906615)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值