HTML5新增表单属性与元素(二)

1.autofocus属性:自动获得焦点

<form action="" method="post">
            <h6>autofocus属性:自动获得焦点</h6>
            <input type="text" name="" id="keyword"  autofocus value="" />
            <input type="submit" value="搜索"/>
        </form>

HTML5新增表单属性与元素(二)

 

 2.pattern属性:表单正则表达式校验

<form action="doAction2.php" method="post">
            <label>用户名:</label>
            <input type="text" novalidate name="username" id="keyword"  placeholder="必须是字母且长度为6-10位之间" 
                pattern="^[a-zA-Z]{6,10}" value="" />
            <input type="submit" value="注册"/>
        </form>

3.

HTML5新增表单属性与元素(二)

 

 

<form action="doAction2.php" method="post">
            <textarea name="desc" wrap="soft" maxlength="5"></textarea>
            <input type="submit" value="提交"/>
        </form>

4.datalist元素和list属性

<form action="doAction2.php" method="post">
            <label>请选择你喜欢编程语言:</label>
            <input type="" list="la" name="la" id="" value="" /><span>datalist</span>
            <datalist id="la">
                <option>html</option>
                <option>java</option>
                <option>php</option>
                <option>javascript</option>
                <option>html</option>
                <option>htm2</option>
                <option>php</option>
                <option>javascript</option>
                            
            </datalist>
            <input type="submit" value="提交"/>
        </form>

HTML5新增表单属性与元素(二)

 

 

<form action="doAction2.php" method="post">
            <input type="color" class="text" name="color" list="colors"/>
            <input type="color" class="text" name="color" list=""/>
            <datalist id="colors">
                <option value="#ff0000"></option>
                <option value="#00ff00"></option>
                <option value="#0000ff"></option>
                <option value="#abcdef"></option>
                <option value="#ffffff"></option>
            </datalist>
            <input type="submit" value="提交"/>
        </form>

HTML5新增表单属性与元素(二)

 

 

  

上一篇:HTML 5中的DataList是什么?


下一篇:python爬虫爬取2020年中国大学排名