关于前端的一些学习记录（4）

（继续记录（3）中关于标签的学习）

三、表单标签

应用场景：在做账号的登陆的时候使用或在搜索的时候使用；

一般情况下，一个网页仅使用一次表单标签。

1、input标签

input标签通过属性名不同显示不同的效果。

type属性值

2、input占位符

属性名：placeholder 

引号内赋值：在框内现实的小字

请输入用户名：<input type="text" placeholder="邮箱/手机号/注册账号" />
<br />
<br />
请输入密码：<input type="password" placeholder="密码一定包含一位大写字母" />

3、input单选框

性别：<input type="radio" />

想要真正实现单选功能，需要加入单选框的属性：

·属性名：name

·说明：分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选中；

·属性名：checked       

·说明：默认选中（提升用户使用体验，例如：卖口红的网站可以默认在“女”选项上）。

    性别：<input type="radio" name="gender" />男
    <input type="radio" name="gender" checked/>女

4、input上传多个文件

file标签下，上传多个文件的属性：

·属性名：multiple

·说明：这是多文件的属性。

<input type="file" multiple />

5、input按钮标签

  按照此格式书写后，发现无法正常提交及重置，补充：如果需要这些功能的正常运行，需要有一个表单的预标签，表单预表签代码：（此处放一段内容较多的代码块，可复制后运行尝试）

<form action="">
      请输入用户名：<input type="text" placeholder="邮箱/手机号/注册账号" />
      <br />
      <br />
      请输入密码：<input
        type="password"
        placeholder="密码一定包含一位大写字母"
      />
      <br />
      <br />
      性别：<input type="radio" name="gender" />男
      <input type="radio" name="gender" />女
      <br />
      <br />
      <input type="file" multiple />
      <br />
      <br />
      <input type="submit" value="点此提交"/>
      <input type="reset" value="点此重置"/>
</form>

6、button标签

<button type="submit">这里是提交按钮</button>
<br />
<br />
<button type="reset">这里是重置按钮</button>

button标签属性值为button时的具体功能需要JS添加

7、select标签

select标签：下拉菜单的整体；

option标签：下拉菜单的每一项.

      <select>
        <option>北京</option>
        <option>成都</option>
        <option>广州</option>
        <option selected>深圳</option>
      </select>

注：selected属性：默认选中。

8、textarea文本域标签

应用场景：微信朋友圈，能有自动换行功能的文本框。

属性：cols、rows分别规定文本域可见宽度和行数；

注意点：其右下角可以拖拽，cols和rows功能并不实用，这两个功能会在CSS中继续介绍。

 9、label标签

 应用场景：扩大可选中的范围。

两种方法：1、使用label标签把内容包裹起来；2、在表单标签上添加id属性；3、在label标签的for属性中设置对应的id属性值.

1、直接使用label标签把内容和表单标签一起包裹起来；2、需要把label标签的for属性删除.

代码演示：

性别：<input type="radio" name="gender" id="nan" /><label for="nan">男</label>
      <label><input type="radio" name="gender" />女</label>

此处，极力推荐第二种写法，在VScode中，用第一种写法在保存自动排版时会出现如下情况：

 input标签部分的学习到此结束，如果您喜欢，希望能得到您的点赞；如果您想同我一起学习，欢迎关注我，咱们一起加油！