Cao Note

外观

HTML 表单 ​

基本表单结构 ​

html
<form action="/submit" method="post">
    <!-- 表单内容 -->
</form>
<form action="/submit" method="post">
    <!-- 表单内容 -->
</form>

表单属性 ​

属性描述
action表单提交的 URL
method提交方法：get（默认）或 post
enctype表单数据编码类型，用于文件上传
target表单提交后在哪里显示响应

表单控件 ​

文本输入 ​

html
<!-- 单行文本输入 -->
<input type="text" name="username" placeholder="请输入用户名" required>
<!-- 密码输入 -->
<input type="password" name="password" placeholder="请输入密码" required>
<!-- 电子邮件输入 -->
<input type="email" name="email" placeholder="请输入邮箱" required>
<!-- URL 输入 -->
<input type="url" name="website" placeholder="请输入网站地址">
<!-- 搜索输入 -->
<input type="search" name="query" placeholder="搜索...">
<!-- 电话号码输入 -->
<input type="tel" name="phone" placeholder="请输入电话号码">
<!-- 多行文本输入 -->
<textarea name="message" rows="4" cols="50" placeholder="请输入留言"></textarea>
<!-- 单行文本输入 -->
<input type="text" name="username" placeholder="请输入用户名" required>
<!-- 密码输入 -->
<input type="password" name="password" placeholder="请输入密码" required>
<!-- 电子邮件输入 -->
<input type="email" name="email" placeholder="请输入邮箱" required>
<!-- URL 输入 -->
<input type="url" name="website" placeholder="请输入网站地址">
<!-- 搜索输入 -->
<input type="search" name="query" placeholder="搜索...">
<!-- 电话号码输入 -->
<input type="tel" name="phone" placeholder="请输入电话号码">
<!-- 多行文本输入 -->
<textarea name="message" rows="4" cols="50" placeholder="请输入留言"></textarea>

数值输入 ​

html
<!-- 数字输入 -->
<input type="number" name="quantity" min="1" max="10" step="1" value="1">
<!-- 范围输入 -->
<input type="range" name="volume" min="0" max="100" value="50">
<!-- 颜色选择器 -->
<input type="color" name="color" value="#ff0000">
<!-- 数字输入 -->
<input type="number" name="quantity" min="1" max="10" step="1" value="1">
<!-- 范围输入 -->
<input type="range" name="volume" min="0" max="100" value="50">
<!-- 颜色选择器 -->
<input type="color" name="color" value="#ff0000">

日期和时间输入 ​

html
<input type="date" name="birthday">
<input type="time" name="appointment">
<input type="datetime-local" name="event_time">
<input type="month" name="birth_month">
<input type="week" name="birth_week">
<input type="date" name="birthday">
<input type="time" name="appointment">
<input type="datetime-local" name="event_time">
<input type="month" name="birth_month">
<input type="week" name="birth_week">

选择控件 ​

html
<!-- 单选按钮 -->
<label><input type="radio" name="gender" value="male" checked> 男</label>
<label><input type="radio" name="gender" value="female"> 女</label>

<!-- 复选框 -->
<label><input type="checkbox" name="hobbies" value="reading"> 阅读</label>
<label><input type="checkbox" name="hobbies" value="sports"> 运动</label>

<!-- 下拉选择框 -->
<select name="city">
    <option value="">请选择城市</option>
    <option value="beijing">北京</option>
    <option value="shanghai" selected>上海</option>
</select>

<!-- 选项组 -->
<select name="car">
    <optgroup label="德国品牌">
        <option value="audi">奥迪</option>
        <option value="bmw">宝马</option>
    </optgroup>
    <optgroup label="日本品牌">
        <option value="toyota">丰田</option>
        <option value="honda">本田</option>
    </optgroup>
</select>
<!-- 单选按钮 -->
<label><input type="radio" name="gender" value="male" checked> 男</label>
<label><input type="radio" name="gender" value="female"> 女</label>

<!-- 复选框 -->
<label><input type="checkbox" name="hobbies" value="reading"> 阅读</label>
<label><input type="checkbox" name="hobbies" value="sports"> 运动</label>

<!-- 下拉选择框 -->
<select name="city">
    <option value="">请选择城市</option>
    <option value="beijing">北京</option>
    <option value="shanghai" selected>上海</option>
</select>

<!-- 选项组 -->
<select name="car">
    <optgroup label="德国品牌">
        <option value="audi">奥迪</option>
        <option value="bmw">宝马</option>
    </optgroup>
    <optgroup label="日本品牌">
        <option value="toyota">丰田</option>
        <option value="honda">本田</option>
    </optgroup>
</select>

数据列表 ​

html
<input type="text" name="browser" list="browsers" placeholder="选择浏览器">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
</datalist>
<input type="text" name="browser" list="browsers" placeholder="选择浏览器">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
</datalist>

文件上传 ​

html
<!-- 单文件上传 -->
<input type="file" name="avatar" accept="image/*">
<!-- 多文件上传 -->
<input type="file" name="photos" multiple accept="image/*">
<!-- 单文件上传 -->
<input type="file" name="avatar" accept="image/*">
<!-- 多文件上传 -->
<input type="file" name="photos" multiple accept="image/*">

隐藏字段和按钮 ​

html
<!-- 隐藏字段 -->
<input type="hidden" name="token" value="abc123">
<!-- 提交按钮 -->
<input type="submit" value="提交">
<button type="submit">提交</button>
<!-- 重置按钮 -->
<input type="reset" value="重置">
<!-- 普通按钮 -->
<button type="button" onclick="alert('点击了按钮')">点击我</button>
<!-- 隐藏字段 -->
<input type="hidden" name="token" value="abc123">
<!-- 提交按钮 -->
<input type="submit" value="提交">
<button type="submit">提交</button>
<!-- 重置按钮 -->
<input type="reset" value="重置">
<!-- 普通按钮 -->
<button type="button" onclick="alert('点击了按钮')">点击我</button>

通用属性 ​

属性描述
name表单控件名称，用于服务器识别
value表单控件的默认值
required标记为必填字段
disabled禁用控件，值不会被提交
readonly只读控件，值会被提交
placeholder输入提示文本
autofocus页面加载时自动获取焦点
autocomplete是否启用自动完成：on 或 off
pattern验证输入的正则表达式
min/max数值或日期的最小值/最大值
step数值输入的步长
maxlength允许输入的最大字符数

表单验证 ​

html
<!-- 使用 required 属性 -->
<input type="text" name="username" required>
<!-- 使用 pattern 属性 -->
<input type="text" name="zipcode" pattern="\d{6}" title="请输入6位邮政编码">
<!-- 使用 min 和 max 属性 -->
<input type="number" name="age" min="18" max="100">
<!-- 禁用浏览器默认验证 -->
<form action="/submit" method="post" novalidate></form>
<!-- 使用 required 属性 -->
<input type="text" name="username" required>
<!-- 使用 pattern 属性 -->
<input type="text" name="zipcode" pattern="\d{6}" title="请输入6位邮政编码">
<!-- 使用 min 和 max 属性 -->
<input type="number" name="age" min="18" max="100">
<!-- 禁用浏览器默认验证 -->
<form action="/submit" method="post" novalidate></form>

表单分组 ​

html
<fieldset>
    <legend>个人信息</legend>
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name">
</fieldset>
<fieldset>
    <legend>个人信息</legend>
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name">
</fieldset>

Copyright © 2024-present xiaocao