11.25周报
文章目录
- 这周学的不多，主要是表单元素
表单元素
一系列元素，主要用于收集用户信息
input元素
空元素
是一个输入框
- 属性type
表示输入框类型
取值可以为：
text（普通文本输入框）
password（密码框）
checkbox（多选框）后面可以加文字表示选项的内容，通过name属性对选项进行分组，还可以对选项加上布尔属性checked，表示默认选中
radio（单选框）后面可以加文字表示选项的内容，通过name属性对选项进行分组，还可以对选项加上布尔属性checked，表示默认选中
file（选择文件）
date（日期选择框）
search（搜索框）
range（滑块区） 可以通过max、min属性控制最大最小值
color（颜色选择）
number（数字输入框） 可以通过max、min属性控制最大最小值，step属性控制步长
当type属性值为reset（重置）、button（普通）、submit（提交）时，input表示按钮
- value属性
表示输入框的值，内容
- placeholder属性
显示提示的文本，文本框没有内容时显示
举例
<input type="text" name="" id="" placeholder="11111">
<!-- 普通单行文本输入框 -->
<input type="radio" name="sex">nan
<input type="radio" name="sex" checked>nv
<!-- 单选框 -->
<input type="checkbox" name="hobby" checked>huang
<input type="checkbox" name="hobby">du3
<input type="checkbox" name="hobby" checked>du2
<!-- 多选框 -->
<input type="submit" value="这是一个提交按钮">
<!-- 提交按钮 -->
大概是这样，其他的type取值可以另外试试
input:text 这样写可以快速确定type的值
select元素
下拉列表选择框
子元素可以是option元素，optgroup元素
option元素表示下拉列表的选项，可以加入布尔型属性selected表示默认选项
optgruop元素表示对option元素进行分组，使用lable属性设置显示内容
注意，optgroup元素并不是选项，无法被选中
select元素加上布尔型属性multiple可以变为多选列表，按住ctrl可以多选
比如
<select name="" id="">
<optgroup label="我是谁">
<option value="">woshishe</option>
<option value="">kadaya</option>
<option value="" selected>pikaqiu</option>
<option value="">miaowazhongzi</option>
<option value="">jienigui</option>
<option value="">benhuolong</option>
</optgroup>
<optgroup label="数字几">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</optgroup>
</select>
<!-- 单选列表 -->
<select name="" id="" multiple>
<optgroup label="我是谁">
<option value="">kadaya</option>
<option value="" selected>pikaqiu</option>
<option value="">miaowazhongzi</option>
<option value="">jienigui</option>
<option value="">benhuolong</option>
</optgroup>
<optgroup label="数字几">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</optgroup>
</select>
<!-- 多选列表 -->
textarea元素
文本域，一个大的文本框
cols rows可以设置它的大小，但是建议用CSS的width跟height控制它的大小
textarea里面的内容不会发生空白折叠
textarea也可以用placeholder属性设置提示文本
如
<textarea cols="30" rows="10" placeholder="随便写点什么吧"></textarea>
button元素
- type属性：reset、submit、button，默认值是submit
直接在button元素里面写东西就可以了
表单状态
-
readonly属性，布尔属性，表示只读
-
disabled属性，布尔属性，表示禁用，会改变表单显示样式
其他配合表单元素的元素
label元素
通常与单选、多选框进行连用达到点击文字也可以进行选择的效果
方法
-
- 利用for属性，for里面写id，
例如
<input type="radio" name="sex" id="male">
<label for="male">男</label>
<input type="radio" name="sex" id="female">
<label for="female">女</label>
<input type="radio" name="sex" id="warma">
<label for="warma">沃尔玛购物袋</label>
-
- 直接用label把input元素包起来
例如
<label><input type="radio" name="sex">男</label>
<label><input type="radio" name="sex">女</label>
<label><input type="radio" name="sex">沃尔玛购物袋</label>
datalist元素
数据列表
元素本身不会显示到页面上，通常与普通文本框配合，效果不好言传，意会即可
使用方法如下
<input type="text" list="fruits">
<!-- 用list引用datalist -->
<datalist id="fruits">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="watermelon">西瓜</option>
<option value="pineapple">菠萝</option>
<option value="lack of vocabulary">我词穷啦</option>
</datalist>
<!-- value里面是要填进文本框的值，外面是显示在value下面的字 -->
form元素
通常，会将整个表单元素全部放进form元素里面，使提交表单的时候会将form元素内部的表单内容以合适的方式提交到服务器
但是对于静态页面来说，form元素并没有什么实际的用处，涉及到了后端以及服务器相关的知识
表单元素的name属性表示提交给服务器的时候的名字，如果是文本框的话，name对应的值是文本框里面的内容，如果是下拉列表的话，name对应的值是value的值
fieldset元素
对表单进行分组
-
子元素legend 表示分组名称
-
用法
把想要分到一组的表单用fieldset元素套起来即可
想要加分组名称的话在fieldset元素里面加上子元素legend即可
大概是这样
<fieldset>
<legend>来分个组</legend>
输入水果
<input type="text" >
输入密码
<input type="password">
<button type="button">好玩</button>
</fieldset>
美化表单元素
新的伪类选择器
- focus
选中被聚焦的元素
聚焦，字面意思，就是正在被关注的部分，比如文本输入框被选中的时候就是被聚焦的元素，所有元素都可以被聚焦
- checked
单选或者多选框被选中时的样式
其实选择框可以由我们设置的样式很少，所以这个选择器通常配合“+元素名”选择器（选中下一个这个类型的兄弟元素）对选择框后面的元素的样式进行设置
常见用法
-
重置表单元素样式
-
控制textarea是否允许调整尺寸
利用CSS属性resize
取值：
- both：默认值，两个方向都可以调整尺寸
- none：不能调整尺寸
- horizontal：水平方向可以调整
- vertical：垂直方向可以调整
- 文本框里面的内容距离文本框的距离
- 方法1 设置input的padding
- 方法2 设置input的text-indent，表示首个文字缩进多少
- 控制单选跟多选框的样式 重点
因为选择框的样式我们基本上是没有自己设置的空间的，所以要美化选择框就只能将原本的选择框丢弃掉，自己做一个看的比较顺眼的选择框
核心思路大概就是
-
- 先在选择框后面加上我们写好的新的“选择框”（注意，这里我们写的选择框并不是真的选择框，只是看起来是选择框而已，实际上并没有选择的功能）
-
- 然后要实现选中的样式变化就需要利用到伪类选择器checked，对选中后的样式进行调整（注意，因为只有对于type值为radio或checkbox的input元素，才是真正的选择框，checked选择器选中的是input元素，所以我们需要设置对的样式是input后面的兄弟元素，要加上“+元素”兄弟元素选择器，从而对我们做的选择框的样式进行设置）
-
- 最后只需要将选择框隐藏掉即可，dislay值设为none（注意，因为我们设置的选择框也包含在label元素里面，所以点击label里面的所有元素都可以对真正的选择框做到选中）
代码如下
<!DOCTYPE html>
<html lang="cmn-hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>美化选择框</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/选择框.css">
</head>
<body>
<p>随便选一个性别吧</p>
<label >
<input type="radio" name="sex">
<span class="xuan"></span>
<span>男</span>
</label>
<label >
<input type="radio" name="sex">
<span class="xuan"></span>
<span>女</span>
</label>
<label >
<input type="radio" name="sex">
<span class="xuan"></span>
<span>沃尔玛购物袋</span>
</label>
</body>
</html>
p{
font-size: 0.5em;
color: #ccc;
}
label .xuan{
width: 12px;
height: 12px;
display: inline-block;
border: 2px solid #6cf;
border-radius: 50%;
position: relative;
top: 3px;
}
label input[type="radio"]:checked~span{
color: #008c8c;
}
label input[type="radio"]:checked+span::after{
content: "";
width: 5px;
height: 5px;
display: inline-block;
background-color: #6cf;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;border-radius: 50%;
}
label input[type="radio"]{
display: none;
}
表单练习
话不多说，直接上代码
<!DOCTYPE html>
<html lang="cmn-hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单练习</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/表单练习.css">
</head>
<body>
<div class="biaodan">
<h2 class="zhuce">
<span>注册</span>
</h2>
<div class="items">
<div class="item">
<input type="text" name="" id="" placeholder="昵称">
</div>
<div class="item">
<input type="password" name="" id="" placeholder="密码">
</div>
<div class="item">
<div class="shouji clearfix"><!--这里将这一行分为两个部分，select & input，其中select又分为title & choices，预取效果是点击title边上的按钮会将choices显示出来，但是缺少js相关知识，并且按钮还不会做，于是粗浅的搞了一个hover效果，有瑕疵（中间的margin会导致难以让choices出现）。这里主要是让select跟input并列，所以将它们都设为左浮动，然后记得clearfix，then，将choices设为绝对定位（记得将父元素设为相对定位），这样就可以让choices覆盖后面的元素了。-->
<div class="select">
<div class="title">
中国大陆
</div>
<div class="choices">
<ul>
<li>Lorem.</li>
<li>Voluptas.</li>
<li>Sed.</li>
<li>Modi!</li>
<li>Porro.</li>
<li>Lorem.</li>
<li>Atque!</li>
<li>Accusantium.</li>
<li>Aspernatur!</li>
<li>Ullam.</li>
<li>Quibusdam!</li>
<li>Est?</li>
<li>Asperiores.</li>
<li>Voluptas!</li>
<li>Quos.</li>
<li>Repudiandae?</li>
<li>Dolorem.</li>
<li>Animi.</li>
<li>Conntur!</li>
<li>Odit?</li>
<li>Qui.</li>
<li>Facere?</li>
<li>Autem!</li>
<li>Ea.</li>
<li>Contur!</li>
</ul>
</div>
</div>
<div class="input">
<input type="text" name="" id="" placeholder="填写常用手机号">
</div>
</div>
</div>
<div class="you">
<a href="" class="youxiang">用邮箱注册></a>
</div>
<div class="item yan">
<input type="text" name="" id="" placeholder="请输入短信验证码">
<button type="button">点击获取</button><!--这个按钮直接用绝对定位给他放到上面那个输入框里面去-->
</div>
<div class="readme">
<label>
<input type="checkbox" name="" id="">
我已同意
</label>
<a href="" class="xieyi">《bilibili用户使用协议就你也想看b站》</a>
&
<a href="" class="guifan">《bilibili账号中心规范呃(⊙﹏⊙)》</a>
</div>
<button type="button" class="zhucebutton">注册账号</button>
<div class="deng">
<a href="" class="denglu">已有帐号，直接登录></a>
</div>
</div>
</div>
</body>
</html>
.clearfix::after{
content: "";
display: block;
clear: both;
}
.biaodan{
width: 1000px;
height: 1200px;
margin: 1em auto;
}
.biaodan .zhuce{
font-size: 38px;
text-align: center;
border-bottom: 2px solid #ddd;
height: 18px;
margin-bottom: 20px;
}
.biaodan .zhuce span{
background: #fff;
padding: 25px;
}
.biaodan .items{
width: 400px;
height: 800px;
margin: 0 auto;
position: relative;
}
.biaodan .items .item{
margin: 30px 0;
}
input[type="text"],input[type="password"]{
border: 2px solid #ddd;
border-radius: 5px;
box-sizing: border-box;
width: 100%;
height: 40px;
font-size: 14px;
text-indent: 1em;
}
input[type="text"]:hover,input[type="password"]:hover{
border-color: #ccc;
}
input[type="text"]:focus,input[type="password"]:focus{
border-color: #6cf;
}
input[type="text"]::placeholder,input[type="password"]::placeholder{
color: #ccc;
}
.biaodan .items .item .shouji .select{
float: left;
width: 130px;
box-sizing: border-box;
font-size: 14px;
position: relative;
}
.biaodan .items .item .shouji .input{
float: left;
width: 270px;
}
.biaodan .items .item .shouji .input input{
width: 100%;
border-radius: 0 5px 5px 0;
}
.biaodan .items .item .shouji .select .title{
border: 2px solid #ccc;
height: 40px;
line-height: 40px;
border-radius: 5px 0 0 5px;
border-right: none;
box-sizing: border-box;
color: #ccc;
padding: 0 1em;
cursor: pointer;
}
.biaodan .items .item .shouji .select .choices{
background: #fff;
padding: 10px 0;
cursor: pointer;
border: 2px solid #ccc;
margin-top: 10px;
text-align: center;
position: absolute;
width: 120px;
display: none;
max-height: 300px;
overflow: auto;
}
.biaodan .items .item .shouji .select:hover .choices{
display: block;
}
.biaodan .items .item .shouji .select .choices li:hover{
font-weight: bold;
background: #6cf;
}
.biaodan .items .item .shouji .select .choices li{
height: 25px;
line-height: 25px;
}
.biaodan .items .you{
position: absolute;
top: 185px;
right: 0;
color: #008c8c;
}
.biaodan .items .item.yan button{
position: absolute;
box-sizing: border-box;
right: 3px;
top: 214px;
width: 100px;
height: 32px;
border: lightblue 1px solid;
border-radius: 5px;
background: lightblue;
cursor: pointer;
color: #fff;
}
.biaodan .items .item.yan button:hover{
background: #33b4de;
}
.biaodan .zhucebutton{
width: 100%;
background: lightblue;
height: 40px;
font-size: 20px;
margin: 20px 0;
border-radius: 5px;
cursor: pointer;
color: #fff;
}
.biaodan .zhucebutton:hover{
background: #33b4de;
}
.biaodan .readme,.biaodan .deng{
color: #008c8c;
}
.biaodan .deng{
position: absolute;
right: 0;
}
到这里就结束啦，进度十分慢啦，要赶进度了QAQ
1094
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
