HTML5 之 表单

表单

表单本身的提交会刷新网页，所以 大多数场景是使用 Ajax 异步提交的。

<form> 标签用于为用户输入创建 HTML 表单。用于向服务器传输数据。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

<form action="welcome.php" method="post">
    <label>账号：</label><input type="text" name="" id="" value="" />
        <br>
    <label>密码：</label><input type="password" name="" id="" value="" />
        <br>
    <button type="submit">登录</button>
    <button type="reset">清空</button>
</form>

from 的属性

input 的相关属性

自动获取焦点

autofocus 属性

<form action="" method="post">
    <label>账号：</label><input type="text" autofocus/>
</form>

输入框历史记录

form 标签设置的 autocomplete 属性，对该标签下的输入框生效，输入框也能单独设置 autocomplete 属性。

<form action="" method="post">
    <label>账号：</label><input type="text" autocomplete="off"/>
</form>

输入框默认值

input 输入框能通过设置 value 属性，设置默认值。

<form action="" method="post">
    <label>姓名：</label><input type="text" value="大数据男孩"/>
</form>

禁用输入框

该输入框被禁用，在 submit 时，也不会被提交。

input，button 都能设置禁用。

<form action="" method="post">
    <label>姓名：</label><input type="text" disabled />
    <br>
    <button type="submit" disabled>登录</button>
</form>

输入框只读

readonly 只读，则无法改变输入框的值。

<form action="" method="post">
    <label>姓名：</label><input type="text" value="大数据男孩" readonly />
</form>