表单与输入

HTML表单用于收集用户数据，是网页交互的核心元素。

表单结构

基础语法

HTML

<form action="提交地址" method="提交方式">
    <!-- 表单元素 -->
</form>

form属性

属性	说明
`action`	提交目标URL
`method`	提交方式：`GET` / `POST`
`enctype`	编码类型：`application/x-www-form-urlencoded` / `multipart/form-data`
`name`	表单名称
`target`	提交目标窗口

输入类型

文本输入

HTML

<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="pwd" placeholder="请输入密码">

选择输入

HTML

<!-- 单选框 -->
<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">
<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="email">
<input type="tel">
<input type="url">
<input type="color">
<input type="file">
<input type="hidden" value="隐藏值">

输入属性

属性	说明
`placeholder`	占位提示文本
`value`	默认值
`required`	必填
`disabled`	禁用
`readonly`	只读
`maxlength`	最大字符数
`min` / `max`	数值范围
`pattern`	正则验证
`autofocus`	自动聚焦

下拉选择与文本域

下拉选择

HTML

<select name="city">
    <option value="">请选择城市</option>
    <option value="bj">北京</option>
    <option value="sh">上海</option>
    <option value="gz">广州</option>
</select>

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

文本域

HTML

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

标签关联

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="重置">

表单验证

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}">

    <!-- 邮箱验证（type自动验证） -->
    <input type="email" required>
</form>

要点总结

name必填：表单元素必须设置name才能提交
类型选择：根据数据类型选择合适的input type
label关联：提升可访问性和用户体验
验证组合：结合required、pattern、type实现校验

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