HTML 表单

什么是 HTML 表单？

HTML 表单是通过 <form> 标签定义的，用于在网页中收集用户输入的数据。

HTML 表单的基本结构

<form action="submit.php" method="post"> 
    
    
    
    
    <!-- 表单控件 --> 
    <input type="submit" value="提交"> 
    
    
</form>

HTML 表单的属性

action - 指定表单数据提交的目标 URL
method - 指定表单数据提交的方法（get 或 post）
target - 指定表单提交后在何处显示响应
enctype - 指定表单数据的编码方式

HTML 表单控件

HTML 提供了多种表单控件，用于收集不同类型的用户输入：

文本输入框

<label for="name">姓名：</label> 


<input type="text" id="name" name="name" placeholder="请输入姓名">

密码输入框

<label for="password">密码：</label> 


<input type="password" id="password" name="password" placeholder="请输入密码">

单选按钮

<label>性别：</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>

复选框

<label>爱好：</label> 

<input type="checkbox" id="hobby1" name="hobby" value="reading"> 





<label for="hobby1">阅读</label> 


<input type="checkbox" id="hobby2" name="hobby" value="sports"> 
<label for="hobby2">运动</label>

<input type="checkbox" id="hobby3" name="hobby" value="music"> 
<label for="hobby3">音乐</label>

下拉列表

<label for="city">城市：</label> 


<select id="city" name="city"> 



    <option value="beijing">北京</option> 
    
    

    <option value="shanghai">上海</option> 
    <option value="guangzhou">广州</option> 
    <option value="shenzhen">深圳</option> 

</select>

文本域

<label for="message">留言：</label> 


<textarea id="message" name="message" rows="4" cols="50" placeholder="请输入留言内容"></textarea>

提交按钮

<input type="submit" value="提交"> 



<button type="submit">提交</button>

重置按钮

<input type="reset" value="重置"> 



<button type="reset">重置</button>

按钮

<button type="button" onclick="alert('Hello!')">点击我</button>

HTML5 表单控件

HTML5 引入了一些新的表单控件类型：

<!-- 电子邮件输入框 -->
<label for="email">电子邮件：</label> 
<input type="email" id="email" name="email" placeholder="请输入电子邮件"> 





<!-- URL 输入框 -->
<label for="url">网址：</label> 
<input type="url" id="url" name="url" placeholder="请输入网址"> 


<!-- 数字输入框 -->
<label for="number">年龄：</label> 
<input type="number" id="number" name="age" min="1" max="100" value="18"> 





<!-- 日期输入框 -->
<label for="date">日期：</label> 
<input type="date" id="date" name="date"> 


<!-- 滑块控件 -->
<label for="range">范围：</label> 
<input type="range" id="range" name="range" min="0" max="100" value="50"> 





<!-- 搜索输入框 -->
<label for="search">搜索：</label> 
<input type="search" id="search" name="search" placeholder="请输入搜索内容">

HTML 表单验证

HTML5 提供了内置的表单验证功能，可以在客户端验证用户输入的数据：

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


<!-- 最小长度 -->
<input type="text" name="username" minlength="3"> 


<!-- 最大长度 -->
<input type="text" name="username" maxlength="20"> 


<!-- 正则表达式验证 -->
<input type="text" name="phone" pattern="^1[3-9]\d{9}$" placeholder="请输入手机号码"> 



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


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

完整的 HTML 表单示例

<form action="submit.php" method="post"> 



    <div> 
        <label for="name">姓名：</label> 
        <input type="text" id="name" name="name" placeholder="请输入姓名" required> 
    </div>
    <br> 

    <div>
        <label for="email">电子邮件：</label> 
        <input type="email" id="email" name="email" placeholder="请输入电子邮件" required> 
    </div>
    <br>

    <div>
        <label>性别：</label> 
        <input type="radio" id="male" name="gender" value="male" checked> 
        
        <label for="male">男</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">女</label>
    </div>
    <br>

    <div>
        <label for="city">城市：</label> 
        <select id="city" name="city"> 
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="guangzhou">广州</option>
            <option value="shenzhen">深圳</option>
        </select>
    </div>
    <br>

    <div>
        <label>爱好：</label> 
        <input type="checkbox" id="hobby1" name="hobby" value="reading">
        <label for="hobby1">阅读</label>
        <input type="checkbox" id="hobby2" name="hobby" value="sports">
        <label for="hobby2">运动</label>
        <input type="checkbox" id="hobby3" name="hobby" value="music">
        <label for="hobby3">音乐</label>
    </div>
    <br>

    <div>
        <label for="message">留言：</label> 
        <br>
        <textarea id="message" name="message" rows="4" cols="50" placeholder="请输入留言内容"></textarea> 
    </div>
    <br>

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

</form>