鱼C论坛

 找回密码
 立即注册
查看: 8405|回复: 35

[学习笔记] 019 - 无敌是多么寂寞(Ⅱ)

[复制链接]
发表于 2018-12-3 09:34:13 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

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







                               
登录/注册后可看大图


万众瞩目的零基础入门学习Web开发(H5&C3)开始更新了!!!


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

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

作为,吹水阁中最爱吹水(爱干无意义事情)的鱼油,整套教程的亮点(槽点)由我来承包~

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


哈哈,废话不多说了,#敲黑板时刻!





在线视频:传送门





课程思维导图

Snip20181203_9.png

猛戳

                               
登录/注册后可看大图
超清





1、type="search"

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

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

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


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

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

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

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




2、type=“color”

再介绍type为color时,小甲鱼老师举了一个生动形象的“买口红,挑色号”的例子,可见小甲鱼老师是
游客,如果您要查看本帖隐藏内容请回复


最简单的颜色框:
<label>颜色框:<input type="color"> </label>
Snip20181203_14.png
Mac下样式


Snip20181203_16.png
Win下样式


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

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

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

没错,通过16进制的RGB颜色值
Snip20181203_19.png





3、type="image"

先把要用到的神兽素材给大家: fishcTor.zip (5.95 KB, 下载次数: 41)

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

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

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


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

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

单击时,会将相对坐标数据传给服务器:
Snip20181203_23.png


坐标原点是图片左上角(0,0),相对距离都是距离此点的值:
Snip20181203_24.png





4、type=“hidden”

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

但是通过Chrome浏览器的检查功能我们发现:
Snip20181203_20.png


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

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

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






课后作业,完成了吗?


传送门






                               
登录/注册后可看大图







如果有收获,别忘了评分


                               
登录/注册后可看大图


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



                               
登录/注册后可看大图




评分

参与人数 1荣誉 +5 鱼币 +5 贡献 +3 收起 理由
鱼C-小师妹 + 5 + 5 + 3 鱼C有你更精彩^_^

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-12-3 09:44:47 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-12-3 15:35:00 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-12-7 23:03:42 From FishC Mobile | 显示全部楼层
谢谢大家支持我,哈哈
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-12-11 14:02:51 | 显示全部楼层
kkkk
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-12-14 18:37:53 | 显示全部楼层
html里好像没有from标签吧
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-12-15 09:57:21 | 显示全部楼层
我错了是有的
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-1-13 14:16:57 | 显示全部楼层
<input type="radio" name="myRadio"> 女
<input type="radio" name="myRadio"> 男
接着我点男、女、男、女、……男。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-2-11 14:04:37 | 显示全部楼层
0.0
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-2-19 18:14:32 | 显示全部楼层
I'm coming!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-4-8 21:14:21 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-5-28 22:38:24 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-7-13 20:28:15 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-7-24 10:29:20 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-8-29 11:00:17 | 显示全部楼层
打卡
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-9-11 22:50:34 | 显示全部楼层
搜索框
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-12-22 11:27:24 From FishC Mobile | 显示全部楼层
女装大佬!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-2-5 12:06:54 | 显示全部楼层
我是真的觉得麻烦
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-3-29 14:09:23 | 显示全部楼层
哭了,好累
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-6-15 16:30:30 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-22 15:24

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表