表单属性

form标签的属性决定表单数据的提交目标、方式和编码格式。

核心提交属性

action属性

<!-- 指定提交地址 -->
<form action="/submit">
    <input type="text" name="username">
    <button type="submit">提交</button>
</form>

<!-- 空action：提交到当前页 -->
<form action="">
</form>

method属性

<!-- GET提交（数据在URL中） -->
<form action="/search" method="GET">
    <input type="text" name="q">
</form>

<!-- POST提交（数据在请求体中） -->
<form action="/login" method="POST">
    <input type="password" name="pwd">
</form>

enctype属性

<!-- 默认：普通表单 -->
<form enctype="application/x-www-form-urlencoded">

<!-- 文件上传：必用此值 -->
<form enctype="multipart/form-data">
    <input type="file" name="avatar">
</form>

<!-- 纯文本（不推荐） -->
<form enctype="text/plain">

目标窗口属性

target属性

<!-- 当前窗口提交（默认） -->
<form target="_self">

<!-- 新窗口提交 -->
<form target="_blank">

<!-- 父框架 -->
<form target="_parent">

<!-- 顶层框架 -->
<form target="_top">

<!-- 指定iframe名称 -->
<form target="myIframe">

验证属性

novalidate属性

<!-- 禁用HTML5原生验证 -->
<form novalidate>
    <input type="email" required>
    <button type="submit">提交</button>
</form>

使用novalidate后，需自行实现表单验证逻辑。

表单命名属性

name属性

<!-- 表单命名（JS访问用） -->
<form name="loginForm">
    <input type="text" name="username">
</form>

<script>
    document.loginForm.username.value = 'admin';
</script>

id属性

<!-- 表单id（按钮关联用） -->
<form id="myForm" action="/submit">
</form>

<!-- 外部按钮关联表单 -->
<button type="submit" form="myForm">提交</button>

属性速查表

实际应用示例

文件上传表单

<form action="/upload" method="POST" enctype="multipart/form-data">
    <input type="file" name="file" required>
    <button type="submit">上传文件</button>
</form>

搜索表单

<form action="/search" method="GET" target="_blank">
    <input type="search" name="q" placeholder="搜索关键词">
    <button type="submit">搜索</button>
</form>

登录表单

<form action="/login" method="POST">
    <input type="text" name="username" required>
    <input type="password" name="password" required>
    <button type="submit">登录</button>
</form>

要点总结

1. 文件上传：method=POST，enctype必为multipart/form-data
2. 敏感数据：登录、支付等使用POST方法
3. 搜索查询：适合使用GET方法
4. 自定义验证：使用novalidate禁用原生验证