前端开发——HTML5新增加的表单属性

1.formactiom属性

对于<input type="submit">、<button type="submit"></button>、<input type="image">元素，都可以指定formcation属性，该属性可以提交到不同的URL。

代码如下：

 <form action="login" method="get">
        登录：<input type="text" name="rname"><br>
        注册: <input type="text" name="lname"><br>
        <input type="submit" value="登录" formaction="login">
        <input type="submit" value="注册" formaction="regist">
    </form>

运行结果：

 

 

2.formmethod属性

formmethod属性可以动态的设计表单的属性以post或者get方法提交,覆盖form元素的原有method属性。

代码如下：

<form action="abc" method="get">
        登录：<input type="text" name="rname"><br>
        注册: <input type="text" name="lname"><br>
        <input type="submit" value="登录" formmethod="get"><br>
        <input type="submit" value="注册" formmethod="post">
   </form>

运行结果：

 

 

3.autofocus 属性

autofocus属性用于页面加载完成时，input 元素自动获取焦点，由于页面只能有一个表单元素可以获得焦点，所以整个页面最多设置一个autofocus属性。

<p>页面加载完成时，input 元素自动获取焦点</p>
<input type="text" autofocus="autofocus">

运行结果：

 

 

4.placeholder属性

placeholder属性用于设置文本或文本域未输入时显示的内容，当用户获得该文本框的焦点或输入时，该属性值就会消失。

代码如下：

 <form action="abc" method="get">
        <input type="text" name="fname" placeholder="用户名"><br>
        <input type="password" name="password" placeholder="密码"><br>
        <input type="submit" value="注册">
    </form>

运行结果：

 

 

5.list的属性

list的属性要结合<datalist>标签一起使用,行程一个下拉菜单的效果，list的属性指定的是<datalist>标签的id值。

代码如下:

 <form action="abc" method="get">
        <input type="text" name="fname" list="fruits">
    </form>
   <datalist id="fruits">
       <option value="苹果"></option>
       <option value="香蕉"></option>
       <option value="西瓜"></option>
   </datalist>

运行结果：

 6.autocomplete属性

autocomplete属性定义表单是否应该启动自动完成功能。自动完成功能是用户在字段开始输入值时，浏览器基于之前输入过的值，应该显示在字段中填写的选项。

代码如下：

<form action="abc" method="get" autocomplete="on">
        姓名: <input type="text" name="fname"><br>
        <input type="submit">
    </form>

运行结果：