017 - 虽千万人吾往矣

不二如是

上一集：016 - 一二三木头人

---

                               
登录/注册后可看大图

万众瞩目的零基础入门学习Web开发（H5&C3）开始更新了！！！

在Web新纪元 |【鱼C#视频课程】剧透这个系列的诞生，时间总是善待任何想拿它搞事情的存在体。

很幸运，一切就这样开始了，开局总会有些不足，但一切在慢慢变好，不是吗？

作为，吹水阁中最爱吹水（爱干无意义事情）的鱼油，整套教程的亮点（槽点）由我来承包～

关注本系列推送（最下方有订阅方式）的鱼油，会享受到一个福利：

会比正常推送，早一个时间节点，看到还未出炉的美味课程

哈哈，废话不多说了，#敲黑板时刻！

---

在线视频：传送门

---

课程思维导图

猛戳

                               
登录/注册后可看大图

超清

---

1、label元素

本节课主要用来“优化”表单细节，首当其冲的就是label元素。

label元素可以为input元素定义标注。

在上一讲的案例，对于文本输入框前面的标示，往往直接“裸露”在那里：

1. 你叫什么名字：<input type="text" name="name"><br><br>
   
2.         你是不是基佬：<input type="text" name="gay"><br><br>

复制代码

“你叫什么名字”，“你是不是基佬”都很尴尬的仍在那里，我们可以用label元素包裹起来：

1. <label>你叫什么名字：<input type="text" name="name"><br><br></label>

复制代码

这样不仅可以让代码更符合语义化规范，而且激活“隐式”关联。

我们只对第一行标签，添加了label元素，和第二行进行对比：

隐式关联效果一目了然，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

有了隐式，就有显示关联啦。

也很简单，上面的效果，我们还可以通过for属性绑定目标元素的id值，修改第二行：

1. <label for="gay">你是不是基佬：</label><input type="text" name="gay" id="gay"><br><br>

复制代码

将input元素放于label元素之外，并且为input元素添加id值（有且仅有一个），然后将label元素的for属性指定为该值。

效果：

可以自动对焦了哦，两种方式灵活掌握哈，但是推荐第一种，直接包裹比较简单。

---

2、fieldset元素

fieldset元素可以讲指定的表单元素进行打包。

打包就是在指定元素的外面出现一圈“黑线”，例如：

1. <form>
   
2.     <fieldset>
   
3.         姓名: <input type="text"><br>
   
4.         性别: <input type="text"><br>
   
5.         <button type="submit">提交</button>
   
6.     </fieldset>
   
7. </form>

复制代码

将我们需要放在一起的表单信息放在一个fieldset元素中。

默认fieldset元素是块级元素，所以横向占满，宽度调整则需要指定CSS。

此时我们还可以为这个元素增加一个标题，legend元素。

1. <fieldset>
   
2.         <legend>信息详情:</legend>
   
3.         姓名: <input type="text"><br>
   
4.         性别: <input type="text"><br>
   
5.         <button type="submit">提交</button>
   
6.     </fieldset>

复制代码

一定要注意：

legend元素为fieldset设置标题，必须是

游客，如果您要查看本帖隐藏内容请回复

---

3、select元素

select元素用于创建一个下拉菜单。

菜单中的项就用option元素包裹：

1.    <select>
   
2.         <option>《零基础入门学习Python》</option>
   
3.         <option>《零基础入门学习Web开发》</option>
   
4.         <option>《零基础入门学习Scratch》</option>
   
5.         <option>《带你学C带你飞》</option>
   
6.     </select>
   

复制代码

还可以通过optgroup元素对菜单中的选项进行分组，和fieldset元素有异曲同工之妙哈。

分组的标题通过指定label属性来实现：

1. <select>
   
2.         <optgroup label="视频教程">
   
3.         <option>《零基础入门学习Python》</option>
   
4.         <option>《零基础入门学习Web开发》</option>
   
5.         <option>《零基础入门学习Scratch》</option>
   
6.         <option>《带你学C带你飞》</option>
   
7.         </optgroup>
   
8. 
   
9.         <optgroup label="已出版实体书籍">
   
10.             <option>《零基础入门学习Python》</option>
    
11.             <option>《带你学C带你飞》</option>
    
12.             <option>《零基础入门学习Scratch》</option>
    
13.         </optgroup>
    
14.     </select>

复制代码

---

课后作业，完成了吗？

传送门

---

                               
登录/注册后可看大图

下一集：018 - 无敌是多么寂寞（I）

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑&#9758;（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

w877713458

刚来就看到跟新了^o^

菠萝菠萝啵

学习啦

LCupid

哇更新了

JustinZhu

kkkk

cjj735243954

233

李小控

Good Good Study Day Day UP！

罗夏_Rorschach

Willing-

哇哦

讨债仔

virgilchao

我要看看看

by2014

土豆拌饭

nice

zyl125657

xjyxjy123

顶

韩某人

好利好

莫西莫西

想看

药水哥

66666666666666666666666666666666666666666666666666

bb887498

必须是

destiny_dian

好棒