表单标签＜input＞的介绍

Q _Q

35274人浏览 · 2022-04-24 17:19:42

Q _Q · 2022-04-24 17:19:42 发布

1 input系列标签的基本介绍

使用场景：在网页中显示收集用户信息的表单效果，如登录页面、注册页面

代码：

input标签可以通过type属性值的不同，展示不同效果

属性值：

text 文本框，用于输入单行文本

password 密码框，用于输入密码

radio 单选框，用于多选一

checkbox 多选框，用于多选多

file 文件选择，用于之后上传文件

submit 提交按钮，用于提交

reset 重置按钮，用于重置

button 普通按钮，默认无功能，之后配合js添加功能

placeholder 占位符，提示用户输入内容的文本

例题：

    文本框：
    <input type="text" name="" id="">
    <br> 密码框：
    <input type="password" name="" id="" placeholder="请输入密码">
    <br> 单选框:
    <input type="radio" name="" id="">
    <br> 多选框:
    <input type="checkbox" name="" id="">
    <input type="checkbox" name="" id="">
    <input type="checkbox" name="" id="">
    <br> 文件选择:
    <input type="file" name="" id="">
    <br> 提交按钮:
    <input type="submit" name="" id="">
    <br> 重置按钮:
    <input type="reset" name="" id="">
    <br> 普通按钮:
    <input type="button" name="" id="">

效果图：

1-1 单选框radio

使用场景：在网页中显示多选一的单选表单控件

代码：

name 用于分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中

checked 默认选中此单选框

例题：

    <p>单选框radio</p>
    性别：
    <input type="radio" name="sex" id="" checked>男
    <input type="radio" name="sex" id="">女

效果图：

1-2 文件选择file

使用场景：在网页中显示文件选择的表单控件

代码：

multiple 多文件选择

例题：

    <p>文件选择</p>
    <input type="file" name="" id="" multiple>

效果图：

1-3 提交按钮submit、重置按钮reset

使用场景：在网页中显示不同功能的按钮表单控件

属性值：

submit 提交按钮，用于提交数据给后台服务器

reset 重置按钮，点击之后恢复表单的默认值

注意：

1 如果需要实现以上按钮功能，需要配合form标签使用

2 form标签用于包裹表单标签

例题：

    <p>表单1</p>
    <form action="">
        用户名:
        <input type="text" name="" id="" placeholder="请输入用户名">
        <br> 密码：
        <input type="password" name="" id="" placeholder="请输入密码">
        <br>
        <input type="submit" name="" id="">
        <input type="reset" name="" id="">
    </form>

效果图：

2 button按钮标签

使用场景：在网页中显示用户点击的按钮

代码：

属性值：

submit 提交按钮，用于提交数据给后台服务器

reset 重置按钮，点击之后恢复表单的默认值

button 普通按钮，默认无功能，之后配合js添加功能

注意：

1 谷歌浏览器中button默认是提交按钮

2 button标签是双标签，要便于包裹其他内容，比如文字、图片等

例题：

    <p>button按钮</p>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">普通按钮，默认无功能，之后配合js添加功能</button>

效果图：

3 select下拉菜单标签

使用场景：在网页提供多个选项的下拉菜单表单控件

代码：

</select>

select标签是下拉菜单的整体

option标签是菜单的每一项选项

selected 默认选中项

例题：

    <p>select下拉菜单</p>
    <select name="" id="">
        <option value="" selected>北京</option>
        <option value="">上海</option>
        <option value="">广州</option>
        <option value="">深圳</option>
    </select>

效果图：

4 textarea文本域标签

使用场景：在网页中提供可输入多行文本的表单控件

代码：

cols 文本域的可见宽度

rows 文本域的可见行数

注意：

1 右下角可以拖拽改变大小

2 实际开发时针对于样式效果推荐用CSS设置

例题：

    <p>textarea文本域</p>
    <textarea name="" id="" cols="30" rows="10" placeholder="文本域的可见范围：10行30列"></textarea>

效果图：

5 label标签

使用场景：常用于绑定内容与表单标签的关系

代码：

使用方法一：

1 使用label标签把内容包裹起来

2 在表单标签上添加id属性

3 在label标签的for属性值等于表单中的id属性值

使用方法二：

1 直接使用label标签把内容和表单标签一起包裹起来

2 把label标签的for属性删除

例题：

    <p>法一</p>
    性别：
    <input type="radio" name="sex" id="nan"><label for="nan">男</label>
    <input type="radio" name="sex" id="nv"><label for="nv">女</label>
    <p>法二</p>
    <label><input type="radio" name="sex" id="">男</label>
    <label><input type="radio" name="sex" id="">女</label>

效果图：