016 - 一二三木头人

不二如是

上一集：015 - 你说hello我说hei

---

                               
登录/注册后可看大图

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

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

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

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

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

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

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

---

在线视频：传送门

---

课程思维导图

猛戳

                               
登录/注册后可看大图

超清

---

1、autocomplete属性

autocomplete属性可以规定输入字段是否应该启用自动完成功能。

自动完成允许浏览器预测对字段的输入。

当用户在字段开始输入时，浏览器基于之前输入过的值，显示一个提示框。

既可以为form（表单）元素添加，这样全局下的文本框都会开启该功能：

1. <form action="welcome.php" method="post" autocomplete="off">
   
2.         名字：<input type="text" name="name"><br><br>
   
3.         性别：<input type="text" name="sex"><br><br>
   
4.         <button type="submit">提交</button>
   
5.     </form>

复制代码

友情提醒：

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

当鱼油第一输入过后并提交表单，下次再输入便会看到提示框：

默认情况下或不指定autocomplete属性，则自动开启哦，如需取消则设置：

1. <form autocomplete="off">

复制代码

如果需要form元素整体保留自动完成功能，而个别文本框需要不开启，则单独设置autocomplete为flase即可：

1. <form action="welcome.php" method="post">
   
2.     名字：<input type="text" name="name" autocomplete="off"><br><br>
   
3.     性别：<input type="text" name="sex"><br><br>
   
4.     <button type="submit">提交</button>
   
5. </form>

复制代码

这样表单中除了姓名文本框不会有自动完成功能，其它依旧有。

---

2、form元素的target属性

form元素的target属性可以规定在何处打开目标URL。

设置target属性，我们可以让服务器响应的页面在指定位置显示，位置有：

_blank        打开新窗口
_self        在相同的框架或窗口中载入目标文档
_parent        把文档载入父窗口或包含了超链接引用的框架的框架集
_top        把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架
framename        在同一个名称的frame框架打开窗口

和我们之前学过的a元素中的玩法有异曲同工之妙哈。

代码：

1. <form action="welcome.php" method="post"  target="_blank">
   
2.     名字：<input type="text" name="name" autocomplete="on"><br><br>
   
3.     性别：<input type="text" name="sex"><br><br>
   
4.     年龄：<input type="text" name="age"><br><br>
   
5.     <button type="submit">提交</button>
   
6. </form>

复制代码

由于设置了target属性的值为_blank，所以会在新的标签页打开服务器返回结果。

其他的几个属性值不是很常用，使用率很低，知道有需求时去哪里找即可。

---

3、input元素的value属性

input元素的value属性可以设置元素的文本值。

演示：

1. 性别：<input type="text" name="sex"><br><br>

复制代码

如果想需要为本框添加默认的值：

1. 性别：<input type="text" name="sex" value="女"><br><br>

复制代码

稍微拓展一个属性，placeholder属性，用来帮助用户填写输入字段的提示。

设置如下：

1. 性别：<input type="text" name="sex" placeholder="必须要输入哈"><br><br>

复制代码

placeholder属性只是帮助用户填写输入字段的提示，一旦用户开始键入相应的值，该值便会消失。

---

4、input元素的autofocus属性

autofocus 属性规定当页面加载时 <input> 元素是否应该自动获得焦点。

默认情况下不指定即认为不需要自动获得焦点，当指定后：

1. 性别：<input type="text" name="sex" autofocus><br><br>

复制代码

当为表单元素中的多个文本元素指定autofocus属性：

1. <form action="http://127.0.0.1/test.php" method="post"  target="_blank">
   
2.     性别：<input type="text" name="sex" autofocus><br><br>
   
3.     年龄：<input type="text" name="age" autofocus><br><br>
   
4.     <button type="submit">提交</button>
   
5. </form>

复制代码

只会从上往下为第一个设置autofus属性的文本框进行自动聚焦。

---

5、disabled属性

设置disabled属性，可以禁用目标元素。

例如：

1. <form action="http://127.0.0.1/test.php" method="post"  target="_blank">
   
2.     性别：<input type="text" name="sex" autofocus><br><br>
   
3.     年龄：<input type="text" name="age" disabled><br><br>
   
4.     <button type="submit" disabled>提交</button>
   
5. </form>

复制代码

年龄和按钮都设置了disabled属性，所以都没有反应。

---

6、input元素的readonly属性

readonly 属性规定输入字段为只读。

只读字段是不能修改的。

不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。

只需设置：

1. 年龄：<input type="text" name="age" readonly><br><br>

复制代码

当然如果直接设置跟disabled属性从效果上没差别，常常还需指定value值：

1. 年龄：<input type="text" name="age" value="30" readonly><br><br>

复制代码

这样所有填表的用户，年龄默认值都是30而且不能修改。

应用场景就是这种无良公司的须知：

---

课后作业，完成了吗？

传送门

---

                               
登录/注册后可看大图

下一集：017 - 虽千万人吾往矣

---

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

                               
登录/注册后可看大图

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

                               
登录/注册后可看大图

w877713458

更新啦。怎么没人啊

LCupid

小甲鱼啥时候更新咧

皛龘骉

阿拉伯烤鱼

lq1989xxyy

支持小甲鱼，小甲鱼快更新啊，等着你的WEB开发课程

JustinZhu

kkkk

cjj735243954

ccc

TCY

提醒ing……

李小控

要努力更新呀

飞奔的上校

支持

讨债仔

zyl125657

xjyxjy123

3

药水哥

666666666666666666666666666666666666666

bb887498

autocomplete

苏苏请认真学习

好

jaykenug

1

万物源于0与1

不二大佬厉害

风吹来了

打卡

学习的工作者

看看内容