1.表单进阶

注意点:

当设置类似注册，登录的表单布局时，最外层的元素最好不要用div元素，而是用form元素，能实现表单的提交功能

表单标签:

布尔属性:

布尔属性是控制元素的某一个状态，是一种比较特别的属性。布尔属性主要出现在表单元素上

下面是分讲几个布尔属性的用法

  • checked: 其实所有表单元素都有此属性，但只有radio, checkbox能在图形上表现出勾选的效果，一旦勾选上，其name及value就能提交
  • selected: option的属性，一旦选上，就出现高亮状态，并将其name,value(没有就取其innerHTML)提交上去
  • readonly: 用于输入性的控件，让用户只能看，不能修改
  • disabled: 让表单元素蒙上一个灰白的色调，用户无法操作它，也不会提交其内容
  • multiple：让下拉框变成多选形式，可以按着SHIFT进行多选
  • hidden: 用于所有元素，这是HTML5新增的布尔属性，效果如同display:none，但其优先级低于CSS，因此没有大规范使用
  • contentEditable： 应用于所有可见的非表单元素，让元素也像INPUT那样编辑它里面的内容
  • async： 用于script标签，是近十年出现最有用的属性，让脚本不再堵塞页面加载

单选框

一个单选按钮组由具有相同 name 属性的单选按钮组成。一旦单选按钮组被建立，选择那按钮组的任何单选按钮将会自动取消同组当前选择的任何按钮。

你可以在一个页面上创建多个单选按钮组，只要每一组拥有唯一的 name 属性即可。

<input type="radio" name="1">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册</title>
  </head>
  <body>
    <form class="container" action="">
      <h1>用户注册</h1>
      <div class="item">
        <input type="text" placeholder="请输入11位手机号" maxlength="11" />
      </div>
      <div class="item">
        <input type="text" placeholder="请填写验证码" />
        <button type="button">发送验证码</button>
      </div>
      <div class="item">
        <input type="password" placeholder="请输入密码" />
      </div>
      <div class="item">
        <input type="password" placeholder="请再次输入密码" />
      </div>
      <div class="item">
        <select name="" id="" multiple>
          <option value="" selected>打搅</option>
          <option value="">睡觉</option>
          <option value="">吃饭</option>
          <option value="">看番</option>
          <option value="">上课</option>
          <option value="">学习</option>
          <option value="">冲浪</option>
          <option value="">写作业</option>
          <option value="">聊天</option>
        </select>
      </div>
      <div class="item">
        <div class="sex">
          <span>性别</span>
        </div>
        <div class="sex2">
          <input type="radio" id="男"  name="1" checked />
          <label for="男">男</label>
          <input type="radio" id="女"  name="1"/>
          <label for="女">女</label>
        </div>
        </div>
        <div class="item">
          <textarea
            name=""
            id=""
            cols="30"
            rows="10"
            placeholder="请填写个人简介"
          ></textarea>
        </div>
        <div class="item">
          <label>
            <input type="checkbox" />
            <span>同意台湾是中国领土不可分割的一部分</span>
          </label>
        </div>
        <div class="item">
            <button>立即注册</button>
            <button type="reset">重置表单</button>
        </div>
    </form>
  </body>
</html>

reset:

在HTML中，<button> 元素可以用来创建按钮，其中 type 属性指定按钮的类型。当 type 属性的值为 “reset” 时，这个按钮就成为了表单重置按钮。这样的按钮用于清除表单中的用户输入，将表单中的各个字段恢复到它们的初始值。

textarea

<textarea> 是 HTML 中用于创建多行文本输入框的元素。它允许用户输入多行文本，比如用于评论、消息等需要多行输入的场景。

基本的 <textarea> 元素看起来像这样：

1
2

<textarea rows="4" cols="50" placeholder="请输入文本..."></textarea>

label for

label 元素的 for 属性用于关联标签与表单元素

使用 for 属性将标签与相应的表单元素关联起来。这通常用于在用户单击标签时，浏览器将焦点自动设置到相关联的表单元素上。

input type="radio" id="女" name="1"

这里的id用来实现label for的关联效果，label for通过找id实现关联

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;  
}
html{
    background-color: rgb(22, 32, 37);

}
.container{
    width: 400px;
    background-color: #fff;
    margin: 30px auto;
    border-radius: 10px;
    padding: 30px;
}
.container h1{
    text-align: center;
    margin-bottom: 30px;
}
.item{
    margin-bottom: 10px;
}
.txt{
    outline: none;
    border: 1px solid rgb(202, 202, 202);
    border-radius: 3px;
    padding: 0 5px;
}
.item input{
    line-height: 30px;
}
select.txt{
    height: 100px;
    padding: 5px;
}
textarea.txt{
    height: 100px;
    padding: 5px;
    resize: none;
}
.item button{
   width:160px;
   height: 35px;
   outline: none;
   border: #fff;
   border-radius: 3px;
   font-size: 14px;
   background-color: rgb(73, 112, 195);
   color: #fff;
   cursor: pointer ;
}
.container .item .sex span{
    padding-right: 12px;
}
.item .xiao{
font-size: 12px;
color: rgb(179, 179, 179);
}

/* 调整行块和行内块高度的差 */
.item .gou{
    vertical-align: -2px;
}
/* 男女默认颜色 */
.item label{
    color:#aaa;
}
/* 同意默认颜色 */
.item label input~span{
    color: #aaa;
}
/* 同意选中颜色 */
.item label input:checked~span{
    color:#333;
}
/* 男女选中颜色 */
.item input:checked~label{
    color:#333;
}

.item .left{
    float: left;
    margin-right: 5px;
}
.clearfix::after{
    content: '';
    display: block;
    clear: both;
}

text-indent

text-indent 是一个 CSS 属性，用于设置文本块中首行文本的缩进。该属性可以接受正数、负数、百分比、和长度值。

:focus

:focus 是 CSS 伪类，用于选择当前获得焦点的元素。这通常在处理交互性元素时很有用，例如表单元素或可点击的元素。

当用户点击页面上的一个可聚焦元素，比如输入框或按钮时，这个元素就会获得焦点。在这种情况下，:focus 伪类就可以用于为获得焦点的元素应用样式。

以下是一个简单的例子，当输入框获得焦点时，边框颜色变为蓝色：

1
2
3
cssCopy codeinput:focus {
  border-color: blue;
}

resize

resize 是 CSS 中用于控制元素是否可被用户调整尺寸的属性。主要用于 <textarea> 和 <iframe> 元素，但一般也可以应用于其他可调整大小的元素。

  1. none（默认值）：元素不能被调整大小。

    1
    2
    3
    cssCopy codetextarea {
      resize: none;
    }

  2. both：元素可以在水平和垂直方向上调整大小。

    1
    2
    3
    cssCopy codetextarea {
      resize: both;
    }

  3. horizontal：元素只能在水平方向上调整大小。

    1
    2
    3
    cssCopy codetextarea {
      resize: horizontal;
    }

  4. vertical：元素只能在垂直方向上调整大小。

    1
    2
    3
    cssCopy codetextarea {
      resize: vertical;
    }

  5. auto：浏览器自动决定是否允许调整大小。

    1
    2
    3
    cssCopy codetextarea {
      resize: auto;
    }

浏览器中计算样式的巧用

可以查看每一个元素的样式

清除浮动的方法

1
2
3
4
5
6
7
8
9
.clearfix::after{

  content: '';

  display: block;

  clear: both;

}

2.属性值的计算过程

浏览器最后渲染的元素样式结果由计算后的属性决定，而不是我们自己设置决定

计算过程:

1.确定声明值：参考样式表中没有冲突的声明，作为CSS属性值

2.对于样式表有冲突(作者样式表和浏览器默认样式表有冲突)的属性

先比较重要性，作者样式表重要性>浏览器默认样式表重要性

再比较特殊性，也就是权重值的比较

最后比较源次序，后面操作的优先级高

3.使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值

4.使用默认值：对仍然没有值的属性，使用默认值

inherit

如果要覆盖浏览器的默认样式，想继承父元素的样式，只需要在子元素的样式用上inherit