HTML5 form 1

HTML5 为Web表单创建带来了很多新特性，添加了多个新属性和输入类型，这些新特性提供了更好的输入控制和验证。

HTML5 中的表单创建方式与 HTML 一样：

placeholder 属性

HTML5 添加了一个名为 placeholder 的新属性。在 和 元素上，此属性提供一种提示，描述输入域所期待的值。</p> <p>简短的提示在用户输入值前会显示在输入域上。</p> <p>实例<br></p> <pre class="brush:html;toolbar:false"><form> <input type="text" name="fname" placeholder="First name" /> <input type="text" name="lname" placeholder="Last name" /> <input type="submit" value="提交" /> </form></pre> <p><br></p> <p>运行显示结果如下图：</p> <p><br></p> <p><img src="http://img.php.cn//upload/image/392/461/812/1513769886158816.png" title="1513769886158816.png" alt="4.png"></p> <p>autofocus 属性</p> <p>当表autofocus 属性规定在页面加载时，域自动地获得焦点。</p> <p>实例</p> <p>让 "First name" input 输入域在页面载入时自动聚焦：</p> <pre class="brush:html;toolbar:false"><form> First name: <input type="text" name="fname" autofocus><br> Last name: <input type="text" name="lname"><br> <input type="submit"> </form></pre> <p><br></p> <p>运行显示结果如下图：</p> <p><br></p> <p><img src="http://img.php.cn//upload/image/479/205/610/1513769894722981.png" title="1513769894722981.png" alt="下载 (13).png"></p> </div> <div id="answer-area"></div> </div> </div> <div class="play-item"> <div class="play-title"> <h2 class="content-title" data-tt="3" data-dd="190">填写空格让输入域在页面载入时自动聚焦，并创建一个提示：</h2> </div> <div class="play-exam-content"> <div id="qcontent" class="content-intro"></div> <div id="answer-area"> <p><form> <input type="text" name="username"<input type="text" name="input_val" class="fill-box input-box">="输入你的用户名"<input type="text" name="input_val" class="fill-box input-box">/> </form></p> </div> </div> </div> <div class="play-item"> <div class="play-title"> <h2 class="content-title" data-tt="" data-dd="">&</h2> </div> <div class="play-exam-content"> <div id="qcontent" class="content-intro"> <p><strong>带必填字段的表单</strong></p> <hr> <p>required 属性规定必须在提交之前填写输入域（不能为空）。<br></p> <p>实例</p> <p>不能为空的 input 字段：</p> <pre class="brush:html;toolbar:false"><form autocomplete="off"> Username: <input type="text" name="username" required /> <input type="submit" /> </form></pre> <p>运行显示结果如下图：</p> <p><img src="http://img.php.cn//upload/image/366/387/513/1513770115573574.png" title="1513770115573574.png" alt="下载 (14).png"></p> <p><br></p> <blockquote> <p>autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。<br>当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。</p> </blockquote> <p><br></p> </div> <div id="answer-area"></div> </div> </div> <div class="play-item"> <div class="play-title"> <h2 class="content-title" data-tt="3" data-dd="191">正确填写以下空格创建不能为空的 input 字段：</h2> </div> <div class="play-exam-content"> <div id="qcontent" class="content-intro"></div> <div id="answer-area"> <p><form> <input type="text" name="username"<input type="text" name="input_val" class="fill-box input-box">/> <<input type="text" name="input_val" class="fill-box input-box">type="text" name="name" required /> </form></p> </div> </div> </div> </div> <div class="play-progress"> <div class="play-card-item"> <ul class="play-card-list"> <li><a href="javascript:;" data-i="0" data-type="0"><i class="play-icon icon-content-title"></i></a></li> <li><a href="javascript:;" data-i="1" data-type="3"><i class="play-icon icon-exam-title"></i></a></li> <li><a href="javascript:;" data-i="2" data-type="0" class="locked"><i class="play-icon icon-content-title"></i></a></li> <li><a href="javascript:;" data-i="3" data-type="3" class="locked"><i class="play-icon icon-exam-title"></i></a></li> <li><a href="javascript:;" data-i="4" data-type="0" class="locked"><i class="play-icon icon-content-title"></i></a></li> <li><a href="javascript:;" data-i="5" data-type="3" class="locked"><i class="play-icon icon-exam-title"></i></a></li> </ul> </div> <span class="progress-nums"><span>1</span>/6</span> </div> <div class="exam-btn-box"> <a href="javascript:;" class="exam-btn-jump btn-submit" data-d="23517">继续</a> </div> <div class="play-nav-box"> <a href="javascript:;" class="nav play-nav-prev" title=""><i class="play-icon play-icon-prev"></i></a> <a href="javascript:;" class="nav play-nav-next" title=""><i class="play-icon play-icon-next"></i></a> </div> <!-- 正确 --> <div class="play-tip-area play-tip-right" style="display: none;"> <div class="play-tip-box"> <i class="play-icon play-icon-right"></i> </div> <div class="play-tip-box"> <h2>正确</h2> </div> <div class="play-tip-box"> <a href="javascript:;" class="try-goon" title=""></a> </div> </div> <!-- 错误 --> <div class="play-tip-area play-tip-error" style="display: none;"> <div class="play-tip-box"> <i class="play-icon play-icon-error"></i> </div> <div class="play-tip-box"> <h2>错误</h2> </div> <div class="play-tip-box"> <p id="error-analysis"></p> </div> <div class="play-tip-box"> <a href="javascript:;" class="try-again" title=""></a> </div> </div> </div> </div> <div class="modal-box"></div> <style>.layui-fixbar{bottom:200px;}</style> <div class="layui-clear layui-bg-black php-ul-li footer_top_margin"> <div class="layui-row layui-main"> <div class="layui-col-md9"> <ul class="php-float-left"> <li><a href="//m.sbmmt.com/" target="_blank" title="Home">Home</a></li> <li><a href="//m.sbmmt.com/course/list/29/type/2.html" target="_blank" title="PHP Video">PHP Video</a></li> <li><a href="//m.sbmmt.com/course/list/29/type/4.html" target="_blank" title="PHP Practice">PHP Practice</a></li> <li><a href="//m.sbmmt.com/course/list/29/type/1.html" target="_blank" title="php code">php code</a></li> <li><a href="//m.sbmmt.com/course/list/29/type/3.html" target="_blank" title="PHP manual">PHP manual</a></li> <li><a href="//m.sbmmt.com/dic.html" target="_blank" title="Programming Dictionary">Programming Dictionary</a></li> </ul> <p class="layui-clear footer_phpcn">php.cn：Public welfare online PHP training，Help PHP learners grow quickly！<a href="https://tsm.miit.gov.cn/" target="_blank" style="color:#787d82">ICP License:苏B2-20210495</a></p> <p class="footer_phpcn_record">Copyright 2014-2024 //m.sbmmt.com/ All Rights Reserved<a href="https://beian.miit.gov.cn/" style="color: #9c9c9c;" rel="nofollow" target="_blank">Su ICP Filing No 2020058653号-1</a><a href="http://www.beian.gov.cn/portal/index.do" rel="nofollow" target="_blank"><img src="//m.sbmmt.com/static/images/foot_line.gif" width="15"></a><span class="footer_phpcn_say" style="padding-left:15px;"><a href="//m.sbmmt.com/about/us.html" target="_blank">About us</a><a href="//m.sbmmt.com/about/disclaimer.html" target="_blank" class="mr10">Disclaimer</a></span></p> </div> </div> </div> <input type="hidden" id="verifycode" value="/captcha.html"> <div id="dialogBackground" class="dialogBackground"></div> <div id="note-start" style="display: none"></div> </body> </html>