论坛 › Web开发 › 019 - 无敌是多么寂寞（Ⅱ）

不二如是 发表于 2018-12-3 09:34:13

019 - 无敌是多么寂寞（Ⅱ）

本帖最后由 不二如是 于 2018-12-22 09:47 编辑

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



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、type="search"

本节课我们继续学习input元素的type属性值。

关于input元素的详细介绍，大家可以参看宝典：传送门

首先我们先创建一个搜索框：
<label>搜索框：<input type="search"> </label>


我们结合label元素的特性，隐式关联，内嵌其它表单元素，实现自动对焦。
（详情请看：017 - 虽千万人吾往矣）

注意观察，从“样式”上来，搜素框会在右上角出现一个“小叉子”。

课程中小甲鱼老师，通过PHP实现了关键字的自动跳转，这个不是搜索框的特性导致的哦。

单纯的设置type为search，只是前端页面语义化的处理，搜索框本身不具备搜索能力哈。



2、type=“color”

再介绍type为color时，小甲鱼老师举了一个生动形象的“买口红，挑色号”的例子，可见小甲鱼老师是**** Hidden Message *****

最简单的颜色框：
<label>颜色框：<input type="color"> </label>

Mac下样式


Win下样式

有同学或许会问了，如果用户在表单里选择了相应的颜色，怎么把数据传输给后台呢？

代码：
<form action="welcome.php">
    <label>颜色框：<input type="color"> </label>
    <input type="submit">
</form>

难道直接传输颜色的名字？还是什么呢？

没错，通过16进制的RGB颜色值：




3、type="image"

先把要用到的神兽素材给大家：

将图片素材放在和鱼油xxx.html文件同级的目录下。

如果鱼油很有“仪式感”，那么将图片放在image文件夹下也是很好滴，调用的时候设置相应的路径即可。

创建代码：
<label>图像按钮：<input type="image" src="fishcTor.png"> </label>


PS：课程中:07:28之后，小甲鱼老师开始飙“四川”方言，据说是跟一个漂亮的女性同胞学滴{:10_336:}

当我们将该按钮放在表单中：
<form action="welcome.php">
    <label>图像按钮：<input type="image" src="fishcTor.png"> </label>
</form>

单击时，会将相对坐标数据传给服务器：


坐标原点是图片左上角（0，0），相对距离都是距离此点的值：




4、type=“hidden”

当把input元素的type值设置为hidden后，该元素便会消失不见：
<label>隐藏框：<input type="hidden"> </label>

但是通过Chrome浏览器的检查功能我们发现：


该元素在DOM结构上依旧存在，只是隐藏不见了。

后续我们会好好介绍DOM结构，先理解为“网页的骨架”即可。

该功能常常用来隐藏一些特殊选项，往往针对特殊人群使用，需要时才现身。





课后作业，完成了吗？

传送门



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

下一集：020 - 无敌是多么寂寞（III）



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

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

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

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

爱学习的懒懒君 发表于 2018-12-3 09:44:47

{:10_256:}{:10_257:}{:10_281:}

w877713458 发表于 2018-12-3 15:35:00

{:10_297:}{:10_281:}

幽梦三影 发表于 2018-12-7 23:03:42

{:10_281:}{:10_281:}{:10_281:}谢谢大家支持我，哈哈{:10_256:}

JustinZhu 发表于 2018-12-11 14:02:51

kkkk

chaowei2008 发表于 2018-12-14 18:37:53

html里好像没有from标签吧

chaowei2008 发表于 2018-12-15 09:57:21

我错了是有的

TCY 发表于 2019-1-13 14:16:57

<input type="radio" name="myRadio"> 女
<input type="radio" name="myRadio"> 男
接着我点男、女、男、女、……男。

cjj735243954 发表于 2019-2-11 14:04:37

0.0

李小控 发表于 2019-2-19 18:14:32

I'm coming！

Willing- 发表于 2019-4-8 21:14:21

是

讨债仔 发表于 2019-5-28 22:38:24

{:5_90:}

by2014 发表于 2019-7-13 20:28:15

{:5_95:}

zyl125657 发表于 2019-7-24 10:29:20

{:5_102:}

莫西莫西 发表于 2019-8-29 11:00:17

打卡

bb887498 发表于 2019-9-11 22:50:34

搜索框

茶墨 发表于 2019-12-22 11:27:24

女装大佬！

_Russ_LB 发表于 2020-2-5 12:06:54

我是真的觉得麻烦

风吹来了 发表于 2020-3-29 14:09:23

哭了，好累

Fire4EVER 发表于 2020-6-15 16:30:30

1

查看完整版本: 019 - 无敌是多么寂寞（Ⅱ）