HTML5 表单设置
HTML5 为网页开发者提供了丰富的表单元素，使得创建和操作表单变得更加简单，本文将详细介绍如何在 HTML5 中设置表单，包括表单的基本结构、输入控件、按钮、验证等。
表单基本结构
1、1 <form> 标签
在 HTML5 中，表单是通过 <form> 标签来定义的。<form> 标签有一个重要的属性：action,用于指定表单提交的目标 URL，还可以使用 method 属性来指定表单提交的方式，如 GET 或 POST。
示例代码：
<form action="https://example.com/submit" method="post"> <!-表单内容 --> </form>
1、2 自动填充用户信息
HTML5 支持通过 autocomplete 属性为输入控件自动填充用户信息，当用户登录后，可以将用户的用户名和密码输入框自动填充。
示例代码：
<input type="text" name="username" autocomplete="username"> <input type="password" name="password" autocomplete="current-password">
输入控件
2、1 文本输入框(<input type="text">)
文本输入框是最基本的输入控件，用户可以在其中输入文本，可以通过 size 属性设置输入框的宽度。
示例代码：
<input type="text" name="username" placeholder="请输入用户名">
2、2 数字输入框(<input type="number">)
数字输入框允许用户输入整数和小数，可以通过 min 和 max 属性设置输入范围。
示例代码：
<input type="number" name="age" min="1" max="120">
2、3 单选按钮(<input type="radio">)和复选框(<input type="checkbox">)
单选按钮和复选框用于让用户从多个选项中选择一个或多个，可以使用 name 属性将相同的选项分组。
示例代码：
<input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female"> 女 <br> <input type="checkbox" name="hobby[]" value="reading"> 阅读 <input type="checkbox" name="hobby[]" value="sports"> 运动 <input type="checkbox" name="hobby[]" value="music"> 音乐
2、4 下拉列表(<select>)和多选下拉列表(<select multiple>)
下拉列表允许用户从一组预定义的选项中选择一个，可以使用 multiple 属性创建多选下拉列表。
示例代码：
<select name="city"> <option value="">请选择城市</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> </select> <br> <select name="hobbies" multiple> <option value="reading">阅读</option> <option value="sports">运动</option> <option value="music">音乐</option> </select>
按钮(<button>)和提交按钮(<input type="submit">)
3、1 一般按钮(<button>)和提交按钮(<input type="submit">)的区别在于，一般按钮不会触发表单提交，而提交按钮会触发表单提交，提交按钮还具有禁用功能，可以通过 disabled 属性实现。
示例代码：
<button type="submit">提交</button> <!-一般按钮 --> <button type="submit" disabled>提交</button> <!-禁用的提交按钮 -->
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/191892.html
微信扫一扫 