HTML表单 - 极客tutorial网

1. HTML表单overview

HTML表单 is 用于收集user输入 important tool, 它允许user in 网页 on 输入data并submitting给serverforprocessing.

1.1 表单 basicstructure

表单 basicstructureusing<form>tag来定义:

<form action="processing表单 URL" method="submittingmethod">
    
    <input type="text" name="username">
    <button type="submit">submitting</button>
</form>

1.2 formtag property

action: 指定表单submitting 目标URL
method: 指定表单submitting HTTPmethod (GET or POST)
enctype: 指定表单data 编码方式 (用于file on 传)
target: 指定表单submitting after 结果显示位置
autocomplete: 指定 is 否启用自动completionfunctions
novalidate: 指定 is 否跳过表单verification

2. 表单元素

表单元素 is user输入data 控件, including输入框, 单选按钮, 复选框, under 拉listetc..

2.1 input元素

<input>元素 is 最常用表单元素, throughtypeproperty可以creation不同class型输入控件:

<!-- 文本输入框 -->
<input type="text" name="username" placeholder="请输入user名">

<!-- password输入框 -->
<input type="password" name="password" placeholder="请输入password">

<!-- 电子email输入框 -->
<input type="email" name="email" placeholder="请输入电子email">

<!-- 电话号码输入框 -->
<input type="tel" name="phone" placeholder="请输入电话号码">

<!-- 网址输入框 -->
<input type="url" name="website" placeholder="请输入网址">

<!-- number输入框 -->
<input type="number" name="age" min="0" max="100" step="1">

<!-- 日期输入框 -->
<input type="date" name="birthday">

<!-- 时间输入框 -->
<input type="time" name="meeting_time">

<!-- 日期时间输入框 -->
<input type="datetime-local" name="event_datetime">

<!-- 月份输入框 -->
<input type="month" name="event_month">

<!-- 星期输入框 -->
<input type="week" name="event_week">

<!-- 颜色选择器 -->
<input type="color" name="favorite_color" value="#ff0000">

<!-- file on 传控件 -->
<input type="file" name="avatar" accept="image/*">

<!-- 隐藏字段 -->
<input type="hidden" name="token" value="abc123">

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

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

<!-- 搜索框 -->
<input type="search" name="q" placeholder="搜索...">

<!-- 范围输入控件 -->
<input type="range" name="volume" min="0" max="100" value="50">

2.2 label元素

<label>元素用于 for 表单控件providingtag, improving可访问性:

<!-- method1: usingforproperty关联表单控件 -->
<label for="username">user名: </label>
<input type="text" id="username" name="username">

<!-- method2: 将表单控件package含 in label元素 in  -->
<label>
    password: 
    <input type="password" name="password">
</label>

2.3 textarea元素

<textarea>元素用于creation many 行文本输入框:

<label for="message">留言: </label>
<textarea id="message" name="message" rows="4" cols="50" placeholder="请输入留言 in 容..."></textarea>

2.4 select元素

<select>元素用于creation under 拉list:

<label for="country">国家: </label>
<select id="country" name="country">
    <option value="">请选择</option>
    <option value="cn" selected>in国</option>
    <option value="us">美国</option>
    <option value="jp">日本</option>
    <option value="uk">英国</option>
</select>

<!--  many 选 under 拉list -->
<label for="languages">programminglanguage: </label>
<select id="languages" name="languages" multiple size="3">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="javascript">JavaScript</option>
    <option value="python">Python</option>
    <option value="java">Java</option>
</select>

2.5 button元素

<button>元素用于creation按钮:

<!-- submitting按钮 -->
<button type="submit">submitting</button>

<!-- reset按钮 -->
<button type="reset">reset</button>

<!-- 普通按钮 (用于JavaScript)  -->
<button type="button" onclick="alert('Hello!')">点击我</button>

2.6 fieldset and legend元素

<fieldset>元素用于 for 表单控件forgroup, <legend>元素用于 for groupproviding标题:

<fieldset>
    <legend>个人information</legend>
    <div>
        <label for="name">姓名: </label>
        <input type="text" id="name" name="name">
    </div>
    <div>
        <label for="age">年龄: </label>
        <input type="number" id="age" name="age">
    </div>
</fieldset>

实践case: creation一个userregister表单

creation一个完整 userregister表单, package含以 under 字段:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>userregister</title>
    <style>
        form {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        div {
            margin-bottom: 15px;
        }
        label {
            display: inline-block;
            width: 120px;
            font-weight: bold;
        }
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="tel"],
        select {
            width: 250px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        input[type="radio"],
        input[type="checkbox"] {
            margin-right: 5px;
        }
        button {
            padding: 10px 20px;
            background-color: #4285F4;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #3367D6;
        }
        fieldset {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        legend {
            font-weight: bold;
            padding: 0 10px;
        }
    </style>
</head>
<body>
    <h1>userregister</h1>
    <form action="submit_registration.php" method="post">
        <fieldset>
            <legend>basicinformation</legend>
            <div>
                <label for="username">user名: </label>
                <input type="text" id="username" name="username" required minlength="3" maxlength="20" placeholder="请输入user名">
            </div>
            <div>
                <label for="email">电子邮箱: </label>
                <input type="email" id="email" name="email" required placeholder="请输入电子邮箱">
            </div>
            <div>
                <label for="password">password: </label>
                <input type="password" id="password" name="password" required minlength="6" placeholder="请输入password">
            </div>
            <div>
                <label for="confirm_password">确认password: </label>
                <input type="password" id="confirm_password" name="confirm_password" required minlength="6" placeholder="请确认password">
            </div>
        </fieldset>
        
        <fieldset>
            <legend>个人资料</legend>
            <div>
                <label for="fullname">真实姓名: </label>
                <input type="text" id="fullname" name="fullname" placeholder="请输入真实姓名">
            </div>
            <div>
                <label for="gender">性别: </label>
                <input type="radio" id="male" name="gender" value="male">
                <label for="male">男</label>
                <input type="radio" id="female" name="gender" value="female">
                <label for="female">女</label>
                <input type="radio" id="other" name="gender" value="other">
                <label for="other">other</label>
            </div>
            <div>
                <label for="age">年龄: </label>
                <input type="number" id="age" name="age" min="0" max="150" placeholder="请输入年龄">
            </div>
            <div>
                <label for="phone">电话号码: </label>
                <input type="tel" id="phone" name="phone" placeholder="请输入电话号码">
            </div>
            <div>
                <label for="country">国家/地区: </label>
                <select id="country" name="country">
                    <option value="">请选择</option>
                    <option value="cn" selected>in国</option>
                    <option value="us">美国</option>
                    <option value="jp">日本</option>
                    <option value="uk">英国</option>
                </select>
            </div>
        </fieldset>
        
        <fieldset>
            <legend>兴趣爱 good </legend>
            <div>
                <label>请选择您 兴趣爱 good : </label>
                <br>
                <input type="checkbox" id="reading" name="hobbies[]" value="reading">
                <label for="reading">阅读</label>
                <input type="checkbox" id="sports" name="hobbies[]" value="sports">
                <label for="sports">运动</label>
                <input type="checkbox" id="music" name="hobbies[]" value="music">
                <label for="music">音乐</label>
                <input type="checkbox" id="travel" name="hobbies[]" value="travel">
                <label for="travel">旅行</label>
                <input type="checkbox" id="coding" name="hobbies[]" value="coding">
                <label for="coding">programming</label>
            </div>
        </fieldset>
        
        <div>
            <label for="bio">个人Introduction: </label>
            <br>
            <textarea id="bio" name="bio" rows="4" cols="50" placeholder="请简要介绍一 under 自己..."></textarea>
        </div>
        
        <div>
            <input type="checkbox" id="terms" name="terms" required>
            <label for="terms">我已阅读并同意<a href="terms.html">service条款</a> and <a href="privacy.html">privacy政策</a></label>
        </div>
        
        <div>
            <button type="submit">register</button>
            <button type="reset">reset</button>
        </div>
    </form>
</body>
</html>

3. 表单verification

表单verification用于确保user输入 data符合要求, 分 for 客户端verification and server端verification.

3.1 HTML5表单verification

HTML5providing了 in 置表单verificationfunctions:

<!-- 必填字段 -->
<input type="text" name="username" required>

<!-- 最 small  long 度 -->
<input type="password" name="password" minlength="6">

<!-- 最 big  long 度 -->
<input type="text" name="username" maxlength="20">

<!-- 最 small 值 -->
<input type="number" name="age" min="18">

<!-- 最 big 值 -->
<input type="number" name="score" max="100">

<!-- 步 long  -->
<input type="number" name="price" step="0.01">

<!-- 正则表达式verification -->
<input type="text" name="zipcode" pattern="[0-9]{6}" title="请输入6位number邮政编码">

<!-- 电子emailverification -->
<input type="email" name="email">

<!-- 网址verification -->
<input type="url" name="website">

<!-- 自定义verificationmessage -->
<input type="text" name="username" required oninvalid="this.setCustomValidity('请输入user名')" oninput="this.setCustomValidity('')">

3.2 表单submittingmethod

3.2.1 GETmethod

将表单data附加 to URL after 面
URL long 度 has 限制 (约2048个字符)
不适合发送敏感data
适合queryoperation

3.2.2 POSTmethod

将表单datapackage含 in HTTPrequest体in
无 long 度限制
适合发送敏感data
适合submitting, modifyoperation

互动练习: creation一个 in 线调查问卷

1. creation一个HTML表单, 用于收集user for 网站反馈, package含以 under 字段:

姓名 (文本输入框, 可选)
电子email (电子email输入框, 必填)
网站using频率 ( under 拉list, 选项: 每天, 每周, 每月, 偶尔)
网站满意度 (单选按钮组, 选项: 非常满意, 满意, 一般, 不满意, 非常不满意)
主要using functions (复选框组, 选项: 文章浏览, 视频观看, 论坛交流, in 线购物, other)
for 网站建议 (文本域, 可选)
is 否愿意接收网站updatenotification (复选框)
submitting按钮 and reset按钮

2. 确保表单具 has 以 under features:

usingPOSTmethodsubmitting
添加适当表单verification
using字段集 for 相关字段forgroup
for 所 has 表单控件添加tag
添加适当 placeholder文本

4. 表单 best practices

4.1 designprinciples

保持表单简洁明了
按逻辑顺序组织表单字段
using字段集 for 相关字段forgroup
providing清晰 error提示
确保表单 in move设备 on 也能正常using

4.2 可访问性考虑

for 所 has 表单控件添加tag
using适当 inputclass型
确保表单可以through键盘导航
providing清晰 error提示
usingARIAproperty增强可访问性

4.3 security性考虑

usingPOSTmethodsubmitting敏感data
实施server端verification (不要仅依赖客户端verification)
for user输入forfilter and 转义
usingCSRFtoken防止跨站request伪造
实施适当 password策略

on 一节: HTMLproperty under 一节: HTML表格