HTML5新增表单属性与元素（二）

2020-11-22 17:03:07 阅读：170 来源： 互联网

标签：datalist javascript 表单 html HTML5 autofocus php 属性

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

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

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>

<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>

<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>

标签：datalist,javascript,表单,html,HTML5,autofocus,php,属性
来源： https://www.cnblogs.com/kongwz/p/14019904.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

HTML5新增表单属性与元素（二）