表单元素
一系列元素,主要用于收集用户数据
input元素
输入框
- type属性:输入框类型
type: text, 普通文本输入框
type:password,密码框
type: date, 日期选择框,兼容性问题
<p>
<!-- 普通文本输入框 -->
<input type="text" placeholder="请输入账号">
</p>
<p>
<!-- 密码框 -->
<input type="password" placeholder="请输入密码">
</p>
<p>
<!-- 日期选择框 -->
<input type="date">
</p>
type: search, 搜索框,兼容性问题
type:range,滑块
type:color,颜色选择
type: number,数字输入框
<p>
<!-- 搜索框 -->
<input type="search">
</p>
<p>
<!-- 滑块 -->
<input type="range" min="0" max="5">
</p>
<p>
<!-- 颜色选择 -->
<input type="color">
</p>
<p>
<!-- 数字输入框 -->
<input type="number" min="0" max="100" step="20">
</p>
type: checkbox,多选框(默认选中:checked )
type: radio,单选框
type:file,选择文件
<p>
<!-- 多选框 -->
<input type="checkbox">a
<input type="checkbox">b
<input type="checkbox">c
</p>
<p>
<!-- 单选框 -->
<input type="radio">x
<input type="radio">y
</p>
<p>
<!-- 选择文件 -->
<input type="file">
</p>
- value属性:输入框的值
- placeholder属性:显示提示的文本,文本框没有内容时显示
input元素可以制作按钮
当type值为reset(重置)、button(普通)、submit(提交)时,input表示按钮。
<p>
<input type="reset" value="这是一个重置按钮">
<input type="button" value="这是一个普通按钮">
<input type="submit" value="这是一个提交按钮">
</p>
select元素
下拉列表选择框
通常和option元素配合使用
- 默认选中:selected(布尔属性)
<p>
请选择你喜欢的歌曲
<!-- multiple->多选(布尔属性) -->
<select multiple>
<optgroup label="英文歌">
<option selected>Say So</option>
<option >for him</option>
<option >Yellow Hearts</option>
</optgroup>
<optgroup label="中文歌">
<option >情非得已</option>
<option >他不懂</option>
</optgroup>
</select>
</p>
optgroup:表示分组
<optgroup label=""></optgroup>
label:表示分组的名字
textarea元素
文本域,多行文本框
cols表示列,rows表示行,一般建议使用css书写textarea的宽高
<p>
请填写简介:
<textarea style="width:200px;height:100px;" placeholder="请输入简介"></textarea>
</p>
无空白折叠
按钮元素
button
type属性:reset、submit、button,默认值submit
表单状态
readonly属性:布尔属性,是否只读,不会改变表单显示样式
disabled属性:布尔属性,是否禁用,会改变表单显示样式
<p>
用户账号:
<input readonly type="text" value="abc">
</p>
<p>
用户账号:
<input disabled type="text" value="abc">
</p>
配合表单元素的其他元素
label
普通元素,通常配合单选和多选框使用
- 显示关联
可以通过for属性,让label元素关联某一个表单元素,for属性书写表单元素id的值
<input id="radMale" name="gender" type="radio">
<label for="radMale">男</label>
- 隐式关联
<label>
<input name="gender" type="radio">
女
</label>
label里面不允许放div元素
datalist
数据列表
该元素本身不会显示到页面,通常用于和普通文本框配合
<p>
请输入你常用的浏览器
<input list="userAgent" type="text">
</p>
<datalist id="userAgent">
<option value="Chrome">谷歌浏览器</option>
<option value="IE">IE浏览器</option>
<option value="Fire fox">火狐浏览器</option>
<option value="Safari">苹果浏览器</option>
</datalist>
(不太会用,有兼容性问题
form元素
通常,会将整个表单元素,放置form元素的内部,作用是当提交表单时,会将form元素内部的表单内容以合适的方式提交到服务器。
form元素对开发静态页面没有什么意义。
<form action="" method=""></form>
action:提交表单的地址(不写即提交到当前页面)
method:表示提交方式
表单元素要写name属性,否则数据不会提交到服务器
提交的是value值
fieldset元素
表单分组
<div>
<h1>修改用户信息</h1>
<fieldset>
<legend>账号信息</legend>
<p>
用户账号:
<input type="text" placeholder="请输入账号">
</p>
<p>
用户密码:
<input type="password" placeholder="请输入密码">
</p>
</fieldset>
<fieldset>
<legend>基本信息</legend>
<p>
用户姓名:
<input type="text">
</p>
<p>
城市:
<select name="" id="">
<option value="">Lorem.</option>
<option value="">Vel!</option>
<option value="">Dolore?</option>
<option value="">Autem?</option>
<option value="">Nulla?</option>
<option value="">Aliquam?</option>
<option value="">Obcaecati!</option>
<option value="">Nulla!</option>
<option value="">Totam.</option>
<option value="">Ipsum.</option>
</select>
</p>
</fieldset>
<p>
<button>提交修改</button>
</p>
</div>
美化表单元素
新的伪类
- focus
元素聚焦时的样式
outline: -webkit-focus-ring-color auto 1px;
outline:表示外边框
第一个是颜色,auto表示外边框的style是自动的,而不是实现实线或者其他,当设为auto之后,后面的1px就没有用
outline-offset表示外边框的偏移量,可以为正也可以为负
- checked
单选或多选框被选中的样式
常见用法
-
重置表单元素样式
-
设置textarea是否允许调整尺寸
textarea的css属性:resize
- both:默认值,两个方向都可以调整尺寸
- none:不能调整尺寸
- horizontal: 只能在水平方向调整尺寸
- vertical:只能在垂直方向调整尺寸
- 文本框边缘到内容的距离
1) 使用padding,设置内边距
2) 使用text-indent表示首行缩进
- 控制单选和多选的样式
<body>
<p>
请选择性别:
<label class="radio-item">
<input name="gender" type="radio">
<span class="radio"></span>
<span>男</span>
</label>
<label class="radio-item">
<input name="gender" type="radio">
<span class="radio"></span>
<span>女</span>
</label>
</p>
</body>
<style>
.radio-item .radio {
width: 12px;
height: 12px;
border: 1px solid #999;
border-radius: 50%;
cursor: pointer;
display: inline-block;
}
.radio-item input:checked+.radio{
border-color: #008c8c;
}
.radio-item input:checked~span{
color:#008c8c;
}
.radio-item input:checked+.radio::after {
content: "";
display: block;
width: 5px;
height: 5px;
background: #008c8c;
margin-left: 3.5px;
margin-top: 3.5px;
border-radius: 50%;
}
.radio-item input[type="radio"]{
display: none;
}
</style>