千呼万唤 HTML 5 (6) - 表单元素之 input 元素

最新推荐文章于 2022-10-02 19:51:04 发布
最新推荐文章于 2022-10-02 19:51:04 发布
阅读量798 收藏 1
点赞数 1
分类专栏： HTML 文章标签： input html autocomplete button opera email

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

作者：webabcd



介绍
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>
复制代码



OK
[源码下载]


scoliver
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
千呼万唤始出来：JUC灵魂AQS终于来了
sowhat
12-24 8570
涉及AQS核心方法、lock、unlock、CountDownLatch、await、signal几个重要组件的底层讲解
EasyAR尝鲜系列教程之ImageTarget千呼万唤始出来
热门推荐
素履独行 | 元培的个人博客
02-29 1万+
各位朋友大家好，欢迎大家关注我的博客，我是秦元培，我的博客地址是http://qinyuanpei.com。最近EasyAR终于迎来了一次重大的版本更新：v1.10，真可谓是“千呼万唤始出来”啊，所以在官方文档和示例项目基本完善的情况下，博主决定将EasyAR尝鲜系列教程继续下去。本次教程主要以官方新发布的Unity示例项目为基础来进行讲解，关注Androis/iOS原生应用开发的朋友请自行针对官方
HTML——input标记的典型应用（制作简单信息表单）
流楚丶格念的博客
05-16 4062
web这块的知识整理只能上图了 因为要不中间代码会在打开的网页上自动运行 看不见代码根本 HTML文档结构 算了 知识不整理 了 看书吧 Javaweb 从入门到精通 运行图： 代码如下： <html> <head> <title>&lt;input&gt;标记的典型应用</title> </head> <body><form action="" method="post" name="myfor
表单属性
前端开发＆搜索引擎优化
09-13 892
性 值 描述 DTD 标签的 accept 属性" style="color:rgb(144,11,9); background-color:transparent">accept mime_type 规定通过文件上传来提交的文件的类型。 STF 标签的 align 属性" style="color:rgb(144,11,9);
input 表单元素
MOUNTAIN_SEA1的博客
08-08 199
input 表单元素
input表单元素
YE_Ang的博客
01-12 562
input表单元素 input标签 value属性, 指input输入的值 placeholder属性, input的占位符 type属性,指input的控件类型 input元素 type属性定义了input控件的不同类型, 其常用类型如下: <input type="text"> 单行文本输入框 <input type="number"> 数字框 <input type="password"> 密码框 <input type="
HTML-24：input表单元素
臧小川的博客
06-13 184
input 表单元素
HTML----表单 input元素使用详解
weixin_45609811的博客
09-27 920
form表单的常用属性 action=" 表单提交到的地址 " 与后台交互 必填属性 method 必填属性 属性值为get 或 post（数据量较大，且相对于get更安全） name target 定义跳转方式 get 地址栏能看到参数 post 数据量较大，看不到地址 input 表单控件功能最丰富 type值不同，控件不同 input 元素 通过 typpe=“ … ” 丰富表...
HTML表单元素--input输入类型（1）
Ryan的博客
04-25 2199
HTML表单元素 HTML表单用于搜集不同类型的用户输入。 1.< form >元素：素定义 HTML 表单。其属性有action=“要提交的地址” method=" 提交的方式" 属性值有：get 和 post <form action="" method="post"> </form> 2.< input >元素：最重要的表单元素，有很多t...
东吴证券-固态电池行业深度：千呼万唤始出来，犹抱琵琶半遮面-230429.pdf
06-21
半固态电池技术先行，2023年开启小批量装车发布，全固态电池仍需5-10年实现商业化。半固态电池兼具安全性、能量密度和经济性，率先进入产业化阶段，已率先切入无人机等高端消费领域。2023年，蔚来、上汽、东风、赛力...
东吴证券-固态电池行业深度：千呼万唤始出来，犹抱琵琶半遮面-230604.pdf
06-19
固态电池作为一种新兴的电池技术，正逐渐受到全球科研机构和产业界的广泛关注。与传统的液态电解质电池相比，固态电池拥有更高的能量密度、更好的安全性以及更长的使用寿命，被视为未来电动车和可穿戴设备等领域的...
HTML第四章 input新表单元素(10个，附带详细代码)
a2499797637的博客
10-02 1531
1. 数字控件 2. 颜色控件 3. 日期控件 4. 月份控件 5. 星期控件 6. 邮箱控件 7.搜索控件 8. URL控件 9. 电话号码控件 10. 范围控件
表单元素盘点第一弹＜input＞元素详细介绍
GUIDM的博客
05-02 2064
一篇搞定input元素所有属性
input表单
mumu42的博客
05-04 154
input  type:date（选择日期，在选择日期的项目中可使用）color（颜色）hidden（不知道有什么实际用途）image（图片表单控件，点击默认提交。&lt;input type="image" src="img/a.jpg"/&gt;）text（文本输入框）password（密码）button（按钮，使用vue框架时，点击按钮最好使用button）checkbox（复选）radio...
input输入框光标高度问题
weixin_30657541的博客
04-11 274
IE：不管该行有没有文字，光标高度与font-size大小一致 FF：该行没有文字时，光标大小与input的height大小一致；该行有文字时，光标大小与font-size大小一致 chrome：有2种情况，①设置了line-height 该行没有文字时，光标大小与input的line-height大小一致; 该行有文字时，光标大小从input顶部到文字底部 　　　　　　　　　　 ...
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、付费专栏及课程。

余额充值