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

不二如是 发表于 2019-2-3 20:06:37

022 - 无敌是多么寂寞（V）

本帖最后由 不二如是 于 2019-2-8 08:27 编辑

上一集： 021 - 无敌是多么寂寞（IV）



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、placeholder 属性

placeholder 属性规定可描述输入字段预期值的简短的提示信息，适用的 input 元素类型见思维导图。
（比如：一个样本值或者预期格式的简短描述）。

该提示会在用户输入值之前显示在输入字段中，故又叫“占位提示”，代码：
<form action="#">
    <input type="text" name="fname" placeholder="请输入名字"><br>
    <input type="text" name="lname"><br>
    <input type="submit" value="提交">
</form>


代码中第一个 input 元素设置了 placeholder 属性，会自带的“提示”（placeholder 属性的值）。



2、required 属性

required 属性规定必需在提交表单之前填写输入字段，适用的 input 元素类型见思维导图。

如果提交时，设置 required 属性的 input 元素没有填写相应的文本，便会有一个提示框，代码：
<form action="#">
    <input type="text" name="fname" placeholder="请输入名字"><br>
    <input type="text" name="lname" required><br>
    <input type="submit" value="提交">
</form>


我们为第二个 input 元素设置了 required 属性，未填写任何数据就提交表单时，会弹出提示框。



3、size 属性

size 属性规定以字符数计的 input 元素的可见宽度，适用的 input 元素类型见思维导图。

属性值 number 表示以字符数计的 <input> 元素的宽度（默认值是 20）。

字符数指的是英文字母或数字的数量，代码：
<form action="#">
    <input type="text" name="fname" placeholder="请输入名字"><br>
    <input type="text" name="lname" size="10"><br>
    <input type="submit" value="提交">
</form>


第二个 input 元素设置 size 属性为 10，意味着只能输入10个字符数。

注意：
**** Hidden Message *****



4、maxlength 属性

maxlength 属性规定 input 元素中允许的最大字符数。

maxlength 和 size 属性很类似，区别在于不会改变 input 元素的输入宽度，代码：
<form action="#">
    <input type="text" name="fname" placeholder="请输入名字"><br>
    <input type="text" name="lname" maxlength="10"><br>
    <input type="submit" value="提交">
</form>


第二个 input 元素指定 maxlength 属性为 10，效果上和普通文本框没有区别。

但是当输入超过 10 个字符数时，则无法继续输入。



5、数据列表

<datalist> 标签规定了 input 元素可能的选项列表。

<datalist> 标签被用来在为 input 元素提供"自动完成"的特性。

将 input 元素的 list 属性和 datalist 元素的 id 进行绑定后，用户能看到一个下拉列表。

里边的选项是预先定义好的，将作为用户的输入数据，代码：
<form action="#">
    <input type="text" name="fname" placeholder="请输入名字"><br>
    <input type="text" name="lname" list="happyDay"><br>
    <input type="submit" value="提交">
</form>

<datalist id="happyDay">
    <option value="小甲鱼">
    <option value="不二如是">
</datalist>


绑定 datalist 元素的 input 元素框会出现“下拉提示三角”，简化用户操作。



6、拓展阅读

付费（VIP至尊鱼油免费{:10_278:} ）：传送门



课后作业，完成了吗？

传送门



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

下一集：023 - 好戏在后头



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

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

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

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

像番茄加两个蛋 发表于 2019-2-3 22:14:12

placeholder属性确确实实很实用，不需要自己写js来实现了，直接用input自带的placeholder来实现{:7_136:}

TCY 发表于 2019-2-16 11:47:26

注意什么？

李小控 发表于 2019-2-22 10:06:02

要努力更新呀，我都赶上来啦

吕婷婷 发表于 2019-3-8 09:26:09

小甲鱼

罗夏_Rorschach 发表于 2019-4-6 16:38:58

{:10_277:}

Willing- 发表于 2019-4-10 17:25:15

牛

讨债仔 发表于 2019-5-30 16:14:45

{:10_277:}

zyl125657 发表于 2019-7-24 10:58:41

{:5_103:}

by2014 发表于 2019-7-25 08:00:20

{:5_95:}

韩某人 发表于 2019-8-23 16:41:35

22

莫西莫西 发表于 2019-8-29 16:17:23

{:5_102:}

药水哥 发表于 2019-8-31 00:53:13

2222222222222222222

bb887498 发表于 2019-9-15 18:58:03

没有区别。

yiming1016 发表于 2019-9-22 10:56:33

我看看，谢谢

LeoDong-77 发表于 2019-11-6 23:38:45

0

茶墨 发表于 2019-12-23 11:09:43

注意！

_Russ_LB 发表于 2020-2-5 13:14:30

！！！

MYlindaxia 发表于 2020-3-7 10:55:16

注意什么？难道是size是从0开始计数？size='10'实际上只能写9个字符吗？

Fire4EVER 发表于 2020-6-16 15:20:35

1

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