HTML表单学习笔记

发布时间：2024-10-14 13:51:51

HTML表单学习笔记


HTML表单概述


HTML表单用于在网页上创建用户输入的界面，常用于用户交互，如注册、登录等功能。


表单的基本组成



表单域：通过<form>标签创建一个表单。
表单控件：如文本框、单选框、复选框、按钮等。
提示信息：用于指引用户填写表单的说明文字。


示例代码：


<form action="submit.php" method="POST">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required>
    <button type="submit">提交</button>
</form>




表单标签与属性


<form> 标签



action: 数据提交的目标地址。
method: 数据提交方式（GET或POST）。
name: 表单名称。
autocomplete: 是否开启自动完成。


常用的表单控件


文本输入框


<input type="text" name="username" placeholder="请输入用户名">


密码输入框


<input type="password" name="password">


单选按钮


<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女


复选框


<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="sports"> 运动


提交按钮


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


重置按钮


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




表单控件属性



name: 表单控件名称。
value: 控件的初始值。
placeholder: 输入提示文本。
maxlength: 最大可输入字符数。
required: 必填项。
readonly: 只读属性。
disabled: 禁用状态。




特殊输入类型



日期选择器：


<input type="date">



文件上传：


<input type="file">



颜色选择器：


<input type="color">



滑动条：


<input type="range" min="0" max="100">




下拉框与多行文本框


下拉框


<select name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
</select>


多行文本框


<textarea name="comments" rows="5" cols="40"></textarea>




表单的分组与标签


<fieldset> 与 <legend>


<fieldset>
    <legend>用户信息</legend>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
</fieldset>


<label>



for: 绑定控件的id，可点击标签激活输入框。


<label for="email">电子邮件：</label>
<input type="email" id="email" name="email">




总结



掌握了HTML表单的基本使用方法和常见表单控件。
了解了如何使用<form>标签及其属性来创建交互表单。
学习了各类表单元素的具体用法，如文本框、按钮、下拉框等。



评论数：0