表单

表单是网页与用户交互的核心，用于收集和提交用户数据。

表单结构

form标签

HTML

<form action="/submit" method="POST">
    <!-- 表单元素 -->
</form>

属性	说明
`action`	提交目标URL
`method`	提交方式：GET/POST
`enctype`	编码类型
`novalidate`	禁用原生验证

enctype编码类型

值	用途
`application/x-www-form-urlencoded`	默认，普通表单
`multipart/form-data`	文件上传必用
`text/plain`	纯文本（不推荐）

input输入类型

文本类

HTML

<input type="text" name="username" placeholder="用户名">
<input type="password" name="pwd" placeholder="密码">
<input type="email" name="email">
<input type="tel" name="phone">
<input type="url" name="website">

选择类

HTML

<!-- 单选框（同name互斥） -->
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

<!-- 复选框 -->
<input type="checkbox" name="hobby" value="read"> 阅读
<input type="checkbox" name="hobby" value="music"> 音乐

数值类

HTML

<input type="number" min="0" max="100" step="1" value="50">
<input type="range" min="0" max="100" value="50">

日期时间

HTML

<input type="date">
<input type="time">
<input type="datetime-local">
<input type="month">
<input type="week">

其他类型

HTML

<input type="file" accept="image/*" multiple>
<input type="color" value="#ff0000">
<input type="search">
<input type="hidden" name="token" value="abc123">

表单元素

select下拉

HTML

<select name="city">
    <option value="">请选择</option>
    <option value="bj">北京</option>
    <option value="sh" selected>上海</option>
</select>

<!-- 多选下拉 -->
<select name="tags" multiple>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
</select>

textarea文本域

HTML

<textarea name="content" rows="5" cols="30" placeholder="请输入内容"></textarea>

label标签关联

HTML

<!-- for绑定id -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username">

<!-- 包裹关联 -->
<label>
    用户名：<input type="text" name="username">
</label>

表单按钮

HTML

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>

<input type="submit" value="提交">
<input type="reset" value="重置">

表单验证

HTML5原生验证

HTML

<form>
    <!-- 必填 -->
    <input type="text" required>

    <!-- 长度限制 -->
    <input type="text" minlength="2" maxlength="10">

    <!-- 数值范围 -->
    <input type="number" min="0" max="100">

    <!-- 正则验证 -->
    <input type="text" pattern="[A-Za-z]{3,10}">

    <!-- type自动验证 -->
    <input type="email" required>
    <input type="url">
</form>

常用验证属性

属性	说明
`required`	必填
`minlength`	最小字符数
`maxlength`	最大字符数
`min`	最小值
`max`	最大值
`pattern`	正则表达式

表单分组

HTML

<form>
    <fieldset>
        <legend>基本信息</legend>
        <input type="text" name="name">
        <input type="email" name="email">
    </fieldset>

    <fieldset>
        <legend>偏好设置</legend>
        <input type="checkbox" name="notify"> 接收通知
    </fieldset>
</form>

要点总结

name必填：表单元素必须有name才能提交
文件上传：form需设置enctype="multipart/form-data"
label关联：提升可访问性和用户体验
验证组合：required + pattern + type实现校验

📝 发现内容有误？点击此处直接编辑