HTML表单 - HTML学习网站

HTML表单概述

HTML表单用于收集用户输入，主要包括以下元素：

表单容器 (form)

用于创建表单的容器元素，包含各种输入控件

输入控件 (input)

用于创建各种类型的输入字段，如文本、密码、复选框等

选择控件 (select)

用于创建下拉选择列表，包含多个选项

基本表单结构

一个基本的HTML表单包含以下元素：


<form action="/submit" method="post">
    <div class="form-group">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" required>
    </div>
    
    <div class="form-group">
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" required>
    </div>
    
    <button type="submit">提交</button>
</form>

效果预览

输入类型

HTML5提供了多种输入类型：

文本输入

文本：

邮箱：

网址：

数字输入

数字：

范围：

日期时间

日期：

时间：

日期时间：

选择控件

HTML提供了多种选择控件：

下拉选择

选择城市：

复选框

兴趣爱好：

阅读

运动

音乐

单选按钮

性别：

男

女

表单验证

HTML5提供了内置的表单验证功能：

邮箱验证：

请输入有效的邮箱地址

密码验证：

密码必须包含字母和数字，且长度至少为8位

数字验证：

请输入0-100之间的数字

表单最佳实践

使用语义化的表单结构
为每个输入控件添加label标签
使用适当的输入类型
添加必要的表单验证
提供清晰的错误提示
考虑移动设备的用户体验
实现适当的表单布局
注意表单的可访问性

HTML表单教程