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封装的一系列表单标 ...

随机推荐

UVALive 6885 Flowery Trails
两次SPFA #include<cstdio> #include<cstring> #include<cmath> #include<vector> # ...
zencart产品详细页面调用数据库显示tags标签
给商品信息页面添加一些tag关键词标签有利于谷歌的收录,也有利于关键词的SEO,实现这个功能并不难.其实就是给zencart添加一个功能模块, 具体方法是: 1,在mudules目录下面新建一个以 ...
PAT1027
People in Mars represent the colors in their computers in a similar way as the Earth people. 火星人在他们的 ...
asp.net C# 题目大全
net001在线饰品销售系统 net002鲜花商城 net003商品销售管理系统 net004在线辅导答疑 net005土地税务管理系统 net006旅游管理 net007房产中介 net008房产信 ...
hdu_5145_NPY and girls(莫队算法+组合)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=5145 题意:给你n,m,共有n个女孩,标号为1—n,n个数xi表示第ith个女孩在第xi个教室,然后下 ...
select标签样式及文本有空格
<s:select name="codeid" id="codeid" multiple="false" list="#s ...
Qt5：窗口各类位置
在Qt程序中获取窗口位置的函数有 geometry() , frameGeometry() , pos() ,x() , y()等下面来看看这些函数的区别还有另外两个函数 size() ...
关于nodejs的require顺序
--------------------------------------- check /home/somebody/node_modules/othermodule check /home/so ...
hibernate和ibatis的区别
通过别人的资料,进行自己关注的一些扼要点的整理共同点: 1. 不同点:1. 自动化程度上,hibernate是全自动化的orm框架,提供了对象到数据库的完全映射和sql的内部自动生成,其对象映射是指 ...
openstack controller ha测试环境搭建记录（十一）——配置neutron（网络节点）
在网络节点配置内核参数:vi /etc/sysctl.confnet.ipv4.ip_forward=1net.ipv4.conf.all.rp_filter=0net.ipv4.conf.defau ...

HTML 表单元素之 input 元素

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

随机推荐

热门专题