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

不二如是

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

---

                               
登录/注册后可看大图

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

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

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

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

关注本系列推送（最下方有订阅方式）的鱼油，会享受到一个福利：

会比正常推送，早一个时间节点，看到还未出炉的美味课程

哈哈，废话不多说了，#敲黑板时刻！

---

在线视频：传送门

---

课程思维导图

猛戳

                               
登录/注册后可看大图

超清

---

1、placeholder 属性

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

该提示会在用户输入值之前显示在输入字段中，故又叫“占位提示”，代码：

1. <form action="#">
   
2.     <input type="text" name="fname" placeholder="请输入名字"><br>
   
3.     <input type="text" name="lname"><br>
   
4.     <input type="submit" value="提交">
   
5. </form>

复制代码

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

---

2、required 属性

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

如果提交时，设置 required 属性的 input 元素没有填写相应的文本，便会有一个提示框，代码：

1. <form action="#">
   
2.     <input type="text" name="fname" placeholder="请输入名字"><br>
   
3.     <input type="text" name="lname" required><br>
   
4.     <input type="submit" value="提交">
   
5. </form>

复制代码

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

---

3、size 属性

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

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

字符数指的是英文字母或数字的数量，代码：

1. <form action="#">
   
2.     <input type="text" name="fname" placeholder="请输入名字"><br>
   
3.     <input type="text" name="lname" size="10"><br>
   
4.     <input type="submit" value="提交">
   
5. </form>

复制代码

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

注意：

游客，如果您要查看本帖隐藏内容请回复

---

4、maxlength 属性

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

maxlength 和 size 属性很类似，区别在于不会改变 input 元素的输入宽度，代码：

1. <form action="#">
   
2.     <input type="text" name="fname" placeholder="请输入名字"><br>
   
3.     <input type="text" name="lname" maxlength="10"><br>
   
4.     <input type="submit" value="提交">
   
5. </form>

复制代码

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

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

---

5、数据列表

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

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

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

里边的选项是预先定义好的，将作为用户的输入数据，代码：

1. <form action="#">
   
2.     <input type="text" name="fname" placeholder="请输入名字"><br>
   
3.     <input type="text" name="lname" list="happyDay"><br>
   
4.     <input type="submit" value="提交">
   
5. </form>
   
6. 
   
7. <datalist id="happyDay">
   
8.     <option value="小甲鱼">
   
9.     <option value="不二如是">
   
10. </datalist>

复制代码

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

---

6、拓展阅读

付费（VIP至尊鱼油免费 ）：传送门

---

课后作业，完成了吗？

传送门

---

                               
登录/注册后可看大图

下一集：023 - 好戏在后头

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

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

                               
登录/注册后可看大图

像番茄加两个蛋

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

TCY

注意什么？

李小控

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

吕婷婷

小甲鱼

罗夏_Rorschach

Willing-

牛

讨债仔

zyl125657

by2014

韩某人

22

莫西莫西

药水哥

2222222222222222222

bb887498

没有区别。

yiming1016

我看看，谢谢

LeoDong-77

0

茶墨

注意！

_Russ_LB

！！！

MYlindaxia

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

Fire4EVER

1