论坛 › Web开发 › 017 - 虽千万人吾往矣

不二如是 发表于 2018-11-16 09:24:39

017 - 虽千万人吾往矣

本帖最后由 不二如是 于 2018-11-25 17:36 编辑

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



http://xxx.fishc.com/forum/201803/20/094616suu10rovsa60kazi.jpg

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

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

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

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

关注本系列推送（最下方有订阅方式）的鱼油，会享受到一个福利：
会比正常推送，早一个时间节点，看到还未出炉的美味课程

哈哈，废话不多说了，#敲黑板时刻！{:10_281:}



在线视频：传送门



课程思维导图


猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清



1、label元素

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

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

在上一讲的案例，对于文本输入框前面的标示，往往直接“裸露”在那里：
你叫什么名字：<input type="text" name="name"><br><br>
      你是不是基佬：<input type="text" name="gay"><br><br>

“你叫什么名字”，“你是不是基佬”都很尴尬的仍在那里，我们可以用label元素包裹起来：
<label>你叫什么名字：<input type="text" name="name"><br><br></label>

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

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


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

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

也很简单，上面的效果，我们还可以通过for属性绑定目标元素的id值，修改第二行：
<label for="gay">你是不是基佬：</label><input type="text" name="gay" id="gay"><br><br>

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

效果：


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



2、fieldset元素

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

打包就是在指定元素的外面出现一圈“黑线”，例如：
<form>
    <fieldset>
      姓名: <input type="text"><br>
      性别: <input type="text"><br>
      <button type="submit">提交</button>
    </fieldset>
</form>


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

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

此时我们还可以为这个元素增加一个标题，legend元素。
<fieldset>
      <legend>信息详情:</legend>
      姓名: <input type="text"><br>
      性别: <input type="text"><br>
      <button type="submit">提交</button>
    </fieldset>


一定要注意：
legend元素为fieldset设置标题，必须是**** Hidden Message *****



3、select元素

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

菜单中的项就用option元素包裹：
   <select>
      <option>《零基础入门学习Python》</option>
      <option>《零基础入门学习Web开发》</option>
      <option>《零基础入门学习Scratch》</option>
      <option>《带你学C带你飞》</option>
    </select>



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

分组的标题通过指定label属性来实现：
<select>
      <optgroup label="视频教程">
      <option>《零基础入门学习Python》</option>
      <option>《零基础入门学习Web开发》</option>
      <option>《零基础入门学习Scratch》</option>
      <option>《带你学C带你飞》</option>
      </optgroup>

      <optgroup label="已出版实体书籍">
            <option>《零基础入门学习Python》</option>
            <option>《带你学C带你飞》</option>
            <option>《零基础入门学习Scratch》</option>
      </optgroup>
    </select>




课后作业，完成了吗？

传送门



http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif

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



如果有收获，别忘了评分{:10_281:} ：

http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif

这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）

http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif

w877713458 发表于 2018-11-16 10:49:39

刚来就看到跟新了^o^

菠萝菠萝啵 发表于 2018-11-21 15:23:08

学习啦{:5_105:}

LCupid 发表于 2018-11-22 20:47:12

哇更新了
{:10_281:}

JustinZhu 发表于 2018-12-5 15:57:51

kkkk

cjj735243954 发表于 2018-12-14 12:35:40

233

李小控 发表于 2019-2-17 16:35:18

Good Good Study Day Day UP！

罗夏_Rorschach 发表于 2019-3-29 15:56:13

{:5_108:}

Willing- 发表于 2019-4-8 10:54:52

哇哦

讨债仔 发表于 2019-5-28 08:48:05

{:10_277:}

virgilchao 发表于 2019-6-6 11:08:28

我要看看看

by2014 发表于 2019-6-25 15:04:58

{:5_95:}

土豆拌饭 发表于 2019-7-16 16:20:06

nice

zyl125657 发表于 2019-7-23 17:49:01

{:5_102:}

xjyxjy123 发表于 2019-7-29 17:18:47

顶

韩某人 发表于 2019-8-20 17:17:23

好利好

莫西莫西 发表于 2019-8-25 16:07:09

想看

药水哥 发表于 2019-8-30 23:26:23

66666666666666666666666666666666666666666666666666

bb887498 发表于 2019-9-10 19:49:49

必须是

destiny_dian 发表于 2019-10-13 15:21:19

好棒{:5_106:}

查看完整版本: 017 - 虽千万人吾往矣