HTML5学习(7) form及input新属性

最新推荐文章于 2020-12-02 10:02:39 发布

Symbol

最新推荐文章于 2020-12-02 10:02:39 发布

阅读量1.9k

点赞数

分类专栏： HTML5 文章标签： input html5 autocomplete microsoft search image

本文链接：https://blog.csdn.net/wcf_szkingdom/article/details/7887132

版权

HTML5 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<body>

    <!--新的 form 属性：
        autocomplete     自动完成       
        novalidate       属性规定在提交表单时不应该验证 form 或 input 域。
    -->
    <!--新的 input 属性：
        autocomplete         自动完成
        autofocus            在页面加载时，域自动地获得焦点。
    -->
    <!--form 允许表单某元素在列表区域外-->
    <form action="demo_form.asp" method="get" id="user_form">
    First name:<input type="text" name="fname" />
    <input type="submit" />
    </form>
    Last name: <input type="text" name="lname" form="user_form" />
    <!--
        form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
        重写表单属性  适用于submit,image
    -->
    <form action="demo_form.asp" method="get" id="user_form">
    First name:<input type="text" name="fname" />
    <input type="submit" />
    </form>
    Last name: <input type="text" name="lname" form="user_form" />
    
    <!--height 和 width 只属于image类型-->
    <input type="image" src="img_submit.gif" width="99" height="99" />
    
    <!--list属性        指定的datalist 是输入域的选项列表。-->
    Webpage: <input type="url" list="url_list" name="link" />
    <datalist id="url_list">
    <option label="W3Schools" value="http://www.w3school.com.cn" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
    </datalist>
    
    <!--min, max 和 step  适用于 date pickers、number 以及 range-->
    <!--multiple 允许多个值(多文件上传)-->
    Select images: <input type="file" name="img" multiple="multiple" />
    
    <!--pattern (regexp)-->
    Country code: <input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" />
    
    <!--placeholder 描述输入域所期待的值-->
    <input type="search" name="user_search"  placeholder="Search W3School" />
    
    <!--required 非空-->
    Name: <input type="text" name="usr_name" required="required" />
</body>