马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2018-11-25 17:36 编辑
万众瞩目的 零基础入门学习Web开发（H5&C3）开始更新了！！！ 
在Web新纪元 |【鱼C#视频课程】剧透这个系列的诞生，时间总是善待任何想拿它搞事情的存在体。
很幸运，一切就这样开始了，开局总会有些不足，但一切在慢慢变好，不是吗？
作为，吹水阁中最爱吹水（爱干无意义事情）的鱼油，整套教程的亮点（槽点）由我来承包～
关注本系列推送（最下方有订阅方式）的鱼油，会享受到一个福利：
会比正常推送，早一个时间节点，看到还未出炉的美味课程
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
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设置标题，必须是
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>
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（ 传送门）（ 不喜欢更要订阅 ）
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2018-11-16 09:24:39
置顶卡
千斤顶
显身卡
发表于 2018-11-16 10:49:39
发表于 2018-11-22 20:47:12
