HTML5 之 表单

表单

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

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

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

表单还可以包含 menustextareafieldsetlegendlabel 元素。

<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 的属性

属性 描述
action URL 规定当提交表单时向何处发送表单数据。
method get、post 规定表单提交的 HTTP 方法。
autocomplete on、off 是否启用表单自动填充功能,记住历史提交记录(默认是 on 开启
name form_name 规定表单的名称。
target _blank、_self、_parent、_top、framename 规定在何处打开 action URL。

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 时,也不会被提交。

inputbutton 都能设置禁用。

<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>
发表评论 / Comment

用心评论~