首页课程HTML趣味课堂HTML5 表单 一

HTML5 表单 一

目录列表

HTML5 表单

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

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

<form>
   <input type="text" name="username" />
</form>


在空格处填写正确的标签:

< > < type="text" name="username" /> </form>

HTML5 新属性

placeholder 属性

HTML5 添加了一个名为 placeholder 的新属性。在 <input> 和 <textarea> 元素上,此属性提供一种提示,描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。

实例

<form>
   <input type="text" name="fname" placeholder="First name" />
   <input type="text" name="lname" placeholder="Last name" />
   <input type="submit" value="提交" />
</form>


运行显示结果如下图:


4.png

autofocus 属性

当表autofocus 属性规定在页面加载时,域自动地获得焦点。

实例

让 "First name" input 输入域在页面载入时自动聚焦:

<form>
  First name: <input type="text" name="fname" autofocus><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit">
</form>


运行显示结果如下图:


下载 (13).png

填写空格让输入域在页面载入时自动聚焦,并创建一个提示:

<form> <input type="text" name="username" ="输入你的用户名" /> </form>

&amp;

带必填字段的表单


required 属性规定必须在提交之前填写输入域(不能为空)。

实例

不能为空的 input 字段:

<form autocomplete="off">
  Username: <input type="text" name="username" required />
  <input type="submit" />
</form>

运行显示结果如下图:

下载 (14).png


autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项。


正确填写以下空格创建不能为空的 input 字段:

<form> <input type="text" name="username" /> < type="text" name="name" required /> </form>