HTML 表单元素之 input 元素

介绍
HTML 5: 表单元素之 input 元素

表单元素之 input 元素 - text, password, url, telephone, email, search,
file, radio, checkbox, button, submit,
reset, number, range, image, hidden, color, datetime, datetime-local,
date, time, month, week
input 元素的通用属性 - autocomplete, placeholder, pattern, dirname, size, maxlength, readonly, required, list, multiple, min, max, step

示例
1、text - 文本框
element/form/input/text.html

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

    <!--
        text - 文本框
          autocomplete - 是否启用自动完成功能，“on”或“off”
          placeholder - 提示文本（Opera 支持此标准）
    -->

    <input type="text" autocomplete="on" placeholder="请输入。。。" />

</body>
</html>

2、password - 密码框
element/form/input/password.html

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

    <!--
        password - 密码框
    -->

    <input type="password" value="111111" />

    <script type="text/javascript">

        alert(document.getElementsByTagName("input")[0].value);

    </script>

</body>
</html>

3、url - url 框
element/form/input/url.html

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

    <!--
        url - url 框，文本框形式
    -->

    <input type="url" value="http://www.cnblogs.com/" />

    <script type="text/javascript">

        alert(document.getElementsByTagName("input")[0].value);

    </script>

</body>
</html>

4、telephone - 电话框
element/form/input/telephone.html

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

    <!--
        telephone - 电话框，文本框形式
    -->

    <input type="telephone" value="110" />

    <script type="text/javascript">

        alert(document.getElementsByTagName("input")[0].value);

    </script>

</body>
</html>

5、email - 电子邮件框
element/form/input/email.html

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

    <!--
        email - 电子邮件框，文本框形式
    -->

    <input type="email" value="www@abc.com" />

    <script type="text/javascript">

        alert(document.getElementsByTagName("input")[0].value);

    </script>

</body>
</html>

6、search - 搜索框
element/form/input/search.html

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

    <!--
        search - 搜索框，文本框形式
    -->

    <input type="search" value="我是 search，是一个有特殊语义的 text" />

    <script type="text/javascript">

        alert(document.getElementsByTagName("input")[0].value);

    </script>

</body>
</html>

7、file - 用于上传文件
element/form/input/file.html

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

    <!--
        file - 用于上传文件
    -->

    <input type="file" />

</body>
</html>

8、radio - 单选框
element/form/input/radio.html

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

    <!--
        radio - 单选框
          checked - 是否是选中状态
          name - 相同的是同一组
    -->

    <input id="rad" type="radio" checked name="rad" />
    <label for="rad">radio button title</label>

    <input id="rad2" type="radio" name="rad" />
    <label for="rad2">radio button title</label>

    <script type="text/javascript">

        alert(document.getElementsByTagName("input")[0].value);

    </script>

</body>
</html>

9、checkbox - 复选框
element/form/input/checkbox.html

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

    <!--
        checkbox - 复选框
          checked - 是否是选中状态
    -->

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

    <script type="text/javascript">

        alert(document.getElementsByTagName("input")[0].checked);

    </script>

</body>
</html>

10、button - 一般按钮
element/form/input/button.html

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

    <!--
        button - 一般按钮
    -->

    <input type="button" value="button" />

</body>
</html>

11、submit - 提交按钮
element/form/input/submit.html

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

    <!--
        submit - 提交按钮，用于提交 form 内元素
    -->

    <form action="#">
        <input type="text" />

        <input type="submit" value="submit button" />
    </form>

</body>
</html>

12、reset - 复位按钮
element/form/input/reset.html

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

    <!--
        reset - 复位按钮，用于复位 form 内元素
    -->

    <form action="#">
        <input type="text" />

        <input type="reset" value="reset" />
    </form>

</body>
</html>

13、number - 数字输入框
element/form/input/number.html

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

    <!--
        number - 数字输入框（Opera 支持此标准）
          value - 数字的值
          min - 数字的最小值
          max - 数字的最大值
          step - 上下箭头增减数字的时候，指定其步长
    -->

    <input type="number" value="10" min="10" max="100" step="10" />

    <script type="text/javascript">

        alert(document.getElementsByTagName("input")[0].value);

    </script>

</body>
</html>

14、range - 滑动条
element/form/input/range.html

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

    <!--
        range - 滑动条（Opera 支持此标准）
          value - 数字值
          min - 数字的最小值
          max - 数字的最大值
          step - 步长
    -->

    <input type="range" value="50" min="0" max="100" step="10" />

    <script type="text/javascript">

        alert(document.getElementsByTagName("input")[0].value);

    </script>
</body>
</html>

15、image - 显示图片
element/form/input/image.html

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

    <!--
        image - 显示图片
          src - 图片地址
    -->

    <input type="image" src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" />

</body>
</html>

16、hidden - 隐藏元素，不会显示
element/form/input/hidden.html

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

    <!--
        hidden - 隐藏元素，不会显示
    -->

    <input type="hidden" value="我是 hidden" />

    <script type="text/javascript">

        alert(document.getElementsByTagName("input")[0].value);

    </script>

</body>
</html>

17、color - 颜色选择器
element/form/input/color.html

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

    <!--
        color - 颜色选择器（目前仅 Opera 支持此标准）
          value - 选中的颜色值
    -->

    <input type="color" value="#FF0000" />

    <script type="text/javascript">

        alert(document.getElementsByTagName("input")[0].value);

    </script>

</body>
</html>

18、datetime - 日期时间输入/选择框（UTC）, datetime-loca - 日期时间输入/选择框（本地时区）, date - 日期输入/选择框, time - 时间输入/选择, month - 月份输入/选择框, week - 星期输入/选择框
element/form/input/datetime_datetime-local_date_time_month_week.html.html

<!doctype html>
<html>
<head>
    <title>datetime datetime-local date time month week</title>
</head>
<body>

    <!--
        目前仅 Opera 支持此标准

        datetime - 日期时间输入/选择框（UTC）
        datetime-loca - 日期时间输入/选择框（本地时区）
        date - 日期输入/选择框
        time - 时间输入/选择框
        month - 月份输入/选择框
        week - 星期输入/选择框
    -->

    <input type="datetime" />
    <br />

    <input type="datetime-local" />
    <br />

    <input type="date" />
    <br />

    <input type="time"" />
    <br />

    <input type="month" />
    <br />

    <input type="week" />

</body>
</html>

19、input 元素的通用属性
element/form/input/_attributes.html

<!doctype html>
<html>
<head>
    <title>input 元素的通用属性: autocomplete, placeholder, pattern, dirname, size, maxlength, readonly, required, list, multiple, min, max, step</title>
</head>
<body>

    <!--请用 opera 测试-->

    <form action="#">

        <!--
            autocomplete - 是否启用自动完成功能（on 或 off）
        -->
        <input type="text" autocomplete="on" />
        <br />

        <!--
            placeholder - 用于定义提示文本
        -->
        <input type="text" autocomplete="on" placeholder="请输入。。。" />
        <br />

        <!--
            pattern - 用指定的正则表达式对 input 的值做验证
        -->
        <input pattern="[0-9]" value="6" />
        <br />

        <!--
            dirname - 用于将文本排列方向以参数的形式发给服务端
              示例：下面的 input 在 submit 后，会自动增加参数 &textdir=ltr
        -->
        <input type="text" name="textName" dirname="textdir" />
        <br />

        <!--
            size - 指定 input 的显示宽度（单位：字符数）
        -->
        <input type="text" value="webabcd" size="10" />
        <br />

        <!--
            maxlength - 指定可输入的最大字符长度
        -->
        <input type="text" maxlength="10" />
        <br />

        <!--
            readonly - 指定 input 是否是只读模式
        -->
        <input type="text" value="webabcd" readonly />
        <br />

        <!--
            required - 指定是否为必填元素
        -->
        <input type="text" required />
        <br />

        <!--
            list - 指定建议数据源，建议数据源为一个 datalist 元素。所谓建议数据源可以理解为：系统推测的用户可能输入的内容列表，以方便用户输入，但并不会限制用户的输入
        -->
        <input type="email" list="contacts" />
        <datalist id="contacts">
            <option value="aabb@aa.com" />
            <option value="ccdd@cc.com" />
            <option value="eeff@ee.com" />
        </datalist>
        <br />

        <!--
            multiple - 是否可多选
              如下例：可以在一个 input 中选择多个 email
        -->
        <input type="email" list="contacts2" multiple />
        <datalist id="contacts2">
            <option value="aabb@aa.com" />
            <option value="ccdd@cc.com" />
            <option value="eeff@ee.com" />
        </datalist>
        <br />

        <!--
            以下属性适用于 type="range", type="number" 等
            min - 数字的最小值
            max - 数字的最大值
            step - 步长
        -->
        <input type="range" value="50" min="0" max="100" step="10" />
        <br />

        <input type="submit" value="submit" />

    </form>
</body>
</html>

HTML 表单元素之 input 元素的更多相关文章

HTML:form表单总结，input，select，option，textarea，label
<form>标签是块级元素. form标签的标准属性有id,class,style,title,lang,xml:lang. 表单能够包含input元素(包含button,checkbox ...
HTML <fieldset> 标签将表单内的相关元素分组
<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段. 当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边 ...
HTML笔记（五）表单<form>及其相关元素
表单标签<form> 表单是一个包含表单元素的区域. 表单元素是允许用户在表单中输入信息的元素. 输入标签<input> 输入标签的输入类型由其类型属性type决定.常见的输入 ...
React技巧之表单提交获取input值
正文从这开始~ 总览在React中,通过表单提交获得input的值: 在state变量中存储输入控件的值. 在form表单上设置onSubmit属性. 在handleSubmit函数中访问输入控件的 ...
jQuery编程基础精华02（属性、表单过滤器，元素的each，表单选择器，子元素过滤器(*)，追加方法，节点，样式操作）
属性.表单过滤器属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为 ...
HTML 表单常用的代码元素
表单: 将数据通过浏览器提交到服务器的媒介.<form action="" method="get/post" ></form> get ...
获取表单内的所有元素的值表单格式化插件jquery.serializeJSON
简单描述:一个form表单里有十几个input或者select,要获取到他们的值,我的做法一直都是$("#id").val();这样做本来没什么说的,但是如果有很多呢,就很麻烦,看 ...
js：表单校验（获取元素、事件）
1.表单校验步骤 (1)确定事件(submit事件),创建一个函数并和该事件绑定. (2)书写函数对输入的数据是否合法进行校验(需要设定ID并通过ID来获取用户输入的数据的值). (3)输入的信息合法 ...
[转]SpringMVC<from:form>表单标签和<input>表单标签简介
原文地址:https://blog.csdn.net/hp_yangpeng/article/details/51906654 在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标 ...

随机推荐

for循环与foreach
注意点: for循环时,可以对集合进行操作,但foreach循环中,对集合进行操作会报错: for 循环可以获取下标如下代码: package com.tt;imp ...
转：jmeter实践
本文主要介绍性能测试中的常用工具jmeter的使用方式,以方便开发人员在自测过程中就能自己动手对系统进行自动压测和模拟用户操作访问请求.最后还用linux下的压测工具ab做了简单对比. 1. ...
android 5.0新特性学习--RecyclerView
在过去很多年,我们的PC或者手机设备都是采用拟物化的设计风格,IOS采用扁平化的特性,android在2014年IO大会上说采用Material Design的设计风格,显示效果不能过于生硬的转换,而 ...
L3,please send me a card
expressions: a few words几句话 lend sb sth或lend sth to sb borrow sth或borrow sth from sb 都表示借,但是行为不同. wo ...
使用ReTrofit做缓存（结合上拉加载和下拉刷新）
1. noCache 不使用缓存,全部走网络 2. noStore 不使用缓存,也不存储缓存 3. onlyIfCached 只使用缓存 4. maxAge 设置最大失效时间,失效则不使用需要服务器 ...
HDU 3487 Play with Chain | Splay
Play with Chain Time Limit: 6000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
javascript 中arguments.callee 调用自身
一.Arguments该对象代表正在执行的函数和调用他的函数的参数.[function.]arguments[n]参数function :选项.当前正在执行的 Function 对象的名字.n :选项 ...
js动态添加file控件
<html></head><script language="javascript" type="text/ecmascript" ...
转：Visual Studio进行Web性能测试- Part I
原文作者:Ambily.raj Visual Studio是可以用于性能测试的工具之一.Visual Studio Test版或Visual Studio 2010旗舰版为自动化测试提供了支持.本文介 ...
转：web_submit_data和web_submit_form的差别
在LoadRunner中有两个常用函数:Web_submit_form和Web_submit_data,在群里有人问这两个函数有什么区别.为什么会有两个不同却功能相似的函数.区别在哪里. 首先,从工具 ...

HTML 表单元素之 input 元素

HTML 表单元素之 input 元素的更多相关文章

随机推荐

热门专题