【前端学习之HTML&CSS进阶篇】-- HTML第三篇 – 表单元素
文章目录
本文具体内容参考了B站渡一教育的课程,原课程链接如下:
渡一教育课程
前言
html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言,在学习过程中,我们首先从html出发,在html的学习过程中深入了解css。
关于HTML的进阶部分,内容实际上没有很多,这里将会是最后一部分内容,也就是表单元素,就是以一系列用于收集用户数据的元素。我们主要对input元素、select元素、textarea元素、按钮元素等表单进行介绍,再加上一些表单的状态以及配合元素的讲解。
一、input元素
1. 作用:输入框
2. 属性:
- type,输入框类型;
text–普通文本;
主要用于text类的属性:
- value属性,输入框的值(默认)
- placeholder属性,显示提示的文本,文本框没有内容时显示
<input type="text" value="请输入账号">
<!-- 账号框 -->
<input type="text" placeholder="请输入账号">
password–密码框;
<!-- 密码框 -->
<input type="password" placeholder="请输入密码">
data–日期选择框,存在兼容性问题;
<input type="date" name="" id="">
search–搜索框,存在兼容性问题;
<!-- 搜索框 -->
<input type="search" name="" id="">
range–滑块,属性min、max;
<!-- 滑块 -->
<input type="range" name="" id="">
color–颜色选择框,样式与系统有关;
<!-- 颜色选择 -->
<input type="color" name="" id="">
numeber–数字输入框,存在兼容性问题;
主要用于number类的属性:
- min、max:最小最大值;
- step:数字变化间隔
<!-- 数字输入 -->
<input type="number" name="" id="">
checkbox–多选框;
<!-- 多选框 -->
<p>
<!-- 建议书写name和id保证出现多个多选框时便于分辨 -->
爱好:
<input type="checkbox" name="loves" id="checkbox">
音乐
<input type="checkbox" name="loves" id="checkbox">
阅读
<input type="checkbox" name="loves" id="checkbox">
游戏
</p>
radio–单选框;
主要用于radio类的属性:
- name:同一组选项name相同,保证只有一个可选;
<!-- 单选框 -->
<p>
<!-- 必须书写name,保证为同一组,只能单选 -->
爱好:
<input type="radio" name="loves" id="radio">
音乐
<input type="radio" name="loves" id="radio">
阅读
<input type="radio" name="loves" id="radio">
游戏
</p>
file–选择文件;
<!-- 选择文件 -->
<input type="file" name="" id="file">
3. 制作按钮
当type值为(重置)reset、(普通)button、(提交)submit时,input表示按钮;
<!-- 制作按钮 -->
<!-- value值默认为重置 -->
<input type="reset" value="RESET">
<!-- value值默认为空 -->
<input type="button" value="BUTTON">
<!-- value值默认为提交 -->
<input type="submit" value="SUBMIT">
上述input元素的结果如下图:
二、select元素
1. 含义:下拉列表选择框
2. 使用方法:
- 通常和option元素配合;
<span>Asoul的队长是: </span>
<select name="" id="">
<option value="">嘉然</option>
<option value="">向晚</option>
<option value="">珈乐</option>
<option value="">乃琳</option>
<!-- 默认选中selected,布尔属性 -->
<option selected value="">贝拉</option>
</select>
- 与optgroup配合实现分组
<!-- 分组 -->
<span>选择你最喜欢的LPL战队</span>
<select name="lpl" id="lpl">
<optgroup label="S赛冠军">
<option value="">IG</option>
<option value="">FPX</option>
<option value="">EDG</option>
</optgroup>
<optgroup label="MSI/MSC冠军">
<option value="">EDG</option>
<option value="">RNG</option>
<option value="">TES</option>
</optgroup>
</select>
- 多选: 添加multiple属性,可以通过Ctrl实现多选;
<select multiple>
三、textarea元素
- 文本域,多行文本框
<textarea name="" id="" cols="30" rows="10">
默认显示内容,且不存在空白折叠
</textarea>
- 这里的cols代表一行文本中字母的数量,rows代表一列,但是我们不推荐这里采用这种写法,可以通过CSS样式设置宽高实现调整;
四、表单状态
- readonly属性:布尔属性,是否只读,不会改变表单显示样式
<span>该信息不可修改,只读: </span>
<input type="text" value="不可修改o" readonly
- disabled属性:布尔属性,是否禁用,会改变表单显示样式
<span>该信息不可修改,禁用: </span>
<input type="text" value="禁用" disabled>
五、配合表单元素的其他元素
1. label
普通元素,通常配合单选和多选框使用
- 显式关联
可以通过for属性,让label元素关联某一个表单元素,for属性书写id值
<span>请选择性别</span>
<input id="male" name="gender" type="radio">
<label for="male">男</label>
<input id="female" name="gender" type="radio">
<label for="female">女</label>
- 隐式关联
<label>
<input name="gender" type="radio">
<span>男</span>
</label>
2. datalist
数据列表:本身不会显示到页面,通常用于和普通文本框配合
<!-- datalist -->
<span>请输入常用的浏览器</span>
<input list="userAgent" type="text">
<datalist id="userAgent">
<option value="Chrome">谷歌浏览器</option>
<option value="IE">IE浏览器</option>
<option value="Oprea">欧鹏浏览器</option>
</datalist>
3. form元素
-
用法:通常情况下,会将整个表单元素,放置到form元素的内部
-
作用:提交表单时,会将form元素内部的内容以合适的方式提交到服务器;
【form元素对开发静态页面没有意义】
<!-- form -->
<form action="提交的链接地址" method="提交方式GET/POST">
<span>账号:</span>
<input name="loginid" type="text">
<span>密码:</span>
<input name="loginpwd" type="password">
<button>提交</button>
</form>
4. fieldset元素
作用:表单分组
<!-- fieldset -->
<div>
<!-- 有关账号的分组 -->
<fieldset>
<!-- 分组标题 -->
<legend>账号信息</legend>
<span>用户账号:</span>
<input type="text">
<span>用户密码</span>
<input type="password" name="" id="">
</fieldset>
<!-- 有关用户的基本信息 -->
<fieldset>
<legend>用户基本信息</legend>
<span>用户姓名</span>
<input type="text">
<span>Asoul的队长是: </span>
<select name="asoul" id="asoul">
<option value="">嘉然</option>
<option value="">向晚</option>
<option value="">珈乐</option>
<option value="">乃琳</option>
<!-- 默认选中selected,布尔属性 -->
<option selected value="">贝拉</option>
</select>
<button>提交</button>
</fieldset>
</div>
总结
本节博客对HTML中的表单元素进行了较为详细的介绍,包含input、select、textarea、button等元素,以及其对应的各种属性,最后还对配合表单元素使用的一些元素,例如form、label、fileldset等元素,在下一节博客中,将会简单介绍表单的美化和给出一个练习,敬请期待。