程序员教程

HTML5 表单元素

表单 (form)

form 元素是所有表单的基础，用于包裹输入字段、按钮等表单相关元素。

                <form action="/submit" method="post">
                    <!-- 在这里放置输入字段和按钮 -->
                </form>
                

输入字段 (input)

input 元素是最常用的表单元素之一，它可以表示多种类型的输入字段，例如文本、邮箱、密码等。在上面的HTML5 输入类型教程中已经提到了一些常见的输入类型。

文本域 (textarea)

textarea 元素允许用户输入多行文本。它通常用于评论或消息等需要较长文本输入的场景。

                <label for="message">留言:</label>
                <textarea id="message" name="message" rows="4" cols="50"></textarea>
                

下拉列表 (select)

select 元素可创建一个下拉列表，供用户从中选择一个选项。每个 option 元素代表其中一个选项。

                <label for="gender">性别:</label>
                <select id="gender" name="gender">
                    <option value="male">男</option>
                    <option value="female">女</option>
                    <option value="other">其他</option>
                </select>
                

复选框 (checkbox)

input 元素的 type="checkbox" 可用于创建复选框，允许用户选择多个选项。

                <label for="accept_terms">
                    <input type="checkbox" id="accept_terms" name="accept_terms">
                    我接受服务条款和隐私政策
                </label>
                

单选按钮 (radio)

input 元素的 type="radio" 可用于创建一组单选按钮，只允许用户选择一个选项。

                <label for="male">
                    <input type="radio" id="male" name="gender" value="male">
                    男
                </label>
                <label for="female">
                    <input type="radio" id="female" name="gender" value="female">
                    女
                </label>
                

提交按钮 (submit)

input 元素的 type="submit" 或 button 元素的 type="submit" 可以创建一个提交按钮，将表单数据发送到服务器。

                <input type="submit" value="提交">
                <!-- 或者 -->
                <button type="submit">提交</button>
                

其他表单元素

还有一些其他HTML5表单元素可用于不同场景，如 datalist（提供输入建议）、fieldset（对相关表单元素进行分组）和 legend（为 fieldset 添加标题）等。

                <label for="country">国家:</label>
                <input list="countries" id="country" name="country">
                <datalist id="countries">
                    <option value="United States">
                    <option value="China">
                    <!-- 更多选项 -->
                </datalist>

                <fieldset>
                    <legend>个人信息</legend>
                    <!-- 在此放置与个人信息相关的输入字段 -->
                </fieldset>
                

以上就是一些常用的HTML5表单元素及其用法。使用这些元素，您可以创建出功能丰富、交互性强的网页表单。请注意，不同浏览器可能对HTML5表单元素的支持程度有所不同，因此在使用之前进行充分的测试非常重要。