HTML5新增的input输入类型

最新推荐文章于 2024-07-24 23:00:08 发布

骆驼飞了

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量1.8k

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/luotuofeile/article/details/113878730

版权

新增的input输入类型

email	定义用于email地址的字段
url	定义用于输入URL的字段
number	定义用于输入数字的字段
range	定义用于精确值不重要的输入数字的控件
Date Pickers	date:定义date控件。month：定义month和year控件（不带时区）。week：定义week和year控件。time：定义用于输入时间的控件。datetime：定义date和time控件，基于UTC时区。date-time-local:定义date和time控件，不带时区。
search	定义用于输入搜索字符串的文本字段。
tel	定义用于输入电话号码的字段。
color	定义拾色器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input输入元素</title>
</head>
<body>
<form action="#" method="get">
    <input type="email" name="user_email">
    <input type="url" name="user_url">
    <input type="number" name="user_number" value="1" max="100" min="1" step="2">
        <input type="range" name="user_range" value="1" max="100" min="1" step="2">
    <input type="date" name="user_date">
    <input type="month" name="user_month">
    <input type="week" name="user_week">
    <input type="time" name="user_time" value="12:10:14" min="01:00:00" max="20:00:00" step="2">
    <br/>
    <input type="datetime-local" name="user_datetime">
    <br/><input type="search" name="user_search">
    <br/><input type="tel" name="user_tel">
    <br/><input type="color" name="user_color">

    <br/><input type="submit" value="提交">
</form>
</body>
</html>

HTML5新增的input属性：

autocomplete	规定<input>元素输入字段是否应该启用自动完成功能。
autofocus	规定当页面加载时<input>元素应该自动获得焦点
form	规定<input>元素所属的一个或多个表单
新增的表单重写属性	formaction:规定当表单提交时处理输入控件的文件的URL。 formenctype:规定当表单数据提交到服务器时如何编码。 formmethod:定义发生表单数据到action URL的HTTP方法。 formnovalidate:formnovalidate属性覆盖<form>元素的novalidate属性。 formarget:规定标识提交表单后在哪里显示接收到响应的名称或关键词。除了formnovalidate属性，其他属性都是只针对type=“submit"和type="image".
新增的heighth和width属性	规定<input>元素的高度、和宽度。（只针对type=”image“）。

list	属性引用<datalist>元素，其中包含<input>元素的预定义选项。
新增的min、max和step	min:规定输入框所输入的最小值。 max:规定输入框所输入的最大值。 step：为输入框规定合法的数字间隔。
multiple	属性规定允许用户输入到<input>元素的多个值。
pattern	规定用于验证<input>元素的值的正则表达式。
placeholder	规定可描述输入<input>字段预期值的简短的提示信息。
required	规定必需在提交表单之前填写输入字段。。

<body>
    <h2>HTML5自动完成功能示例</h2>
    <form action="LoginServlet" method="post" autocomplete="on">
        用户名：<input type="text" name="username"><br>
        密码：<input type="password" name="password"><br>
        输入你最喜欢的水果<br><br>
        <input type="text" id="fruit" list="fruitList" autocomplete="on">
        <datalist id="fruitList" style="display: none;">
            <option value="orange">桔子</option>
            <option value="pear">香梨</option>
            <option value="apple">苹果</option>
        </datalist>
        <input type="submit" value="登陆">
    </form>
</body>

<form>
    <p><label for="textarea1">请仔细阅读许可协议：</label></p>
    <p>
        <textarea name="textarea1" id="textarea1" cols="45" rows="5">许可协议许可协议许可协议</textarea>
        <br>
    </p>
    <p>
        <input type="submit" value="同意" autofocus="on">
        <input type="submit" value="拒绝">
    </p>
</form>

请选择要上传的图片：Select images：<input type="file" name="img" multiple>

请输入国家代码：<input type="text" name="country_code" pattern="[A-Za-z]{3}" placeholder="请输入国家代码">

    请输入姓名：<input type="text" name="usr_name" required="required">

<form action="#" enctype="application/x-www-form-urlencoded" method="get" id="testform">
请输入电子邮件地址：<input type="email" name="userid"><br>
    <input type="submit" value="formaction" formaction="list.html">
    <input type="submit" value="formtype" formenctype="multipart/form-data">    //type是file时使用
    <input type="submit" value="formmethod" formmethod="post">
    <input type="submit" value="formnovalidate" formnovalidate="formnovalidate">  //不验证表单控件
    <input type="submit" value="formtarget" formtarget="_self">
    <input type="submit" value="提交">
</form>

骆驼飞了

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5新增的input输入类型

新增的input输入类型email 定义用于email地址的字段 url 定义用于输入URL的字段 number 定义用于输入数字的字段 range 定义用于精确值不重要的输入数字的控件 Date Pickers date:定义date控件。month：定义month和year控件（不带时区）。week：定义week和year控件。time：定义用于输入时间的控件。datetime：定义date和time控件，基于UTC时区。date-time-loc...
复制链接

扫一扫