【网页设计自习室#009】HTML中表单标签

一.input标签

type属性值	效果
text	文本框，用于输入单行文本
password	密码框，用于输入密码
radio	单选框，用于多选一
checkbox	多选框，用于多选多
file	文件选择，用于之后上传文件
submit	提交按钮
reset	重置按钮
button	普通按钮，配合js使用
placeholder	占位符，提示用户输入内容的文本

①输入框

举例
账号:<input type="text">
密码:<input type="password">

②选择框

名称	解释
name	分组，有相同name属性值的单选框为一组
checked	默认选中

③文件

名称	解释
multiple	多文件选择

④按钮

名称	解释
submit	提交按钮，将数据提交给后端服务器
reset	重置按钮，点击之后重置表单
button	普通按钮，配合js添加功能
value	重命名按钮标签

from表单标签，表示其中内容属于一个整体

示例

<form action="">
        账号:<input type="text" placeholder="输入用户名/邮箱">
        <br><br>
        密码:<input type="password" placeholder="输入密码">
        <br><br>
        <input type="submit" value="登录">
        <br><br>
        <input type="reset" value="我不想要">
    </form>
    <br>
    <input type="button" value="通宵">
    <br><br>
    选择：<input type="radio" name="s1">好 <input type="radio" name="s1">坏
    <br><br>
    多选：<input type="checkbox" name="s2">熬夜 <input type="checkbox" name="s2">通宵 <input type="checkbox" name="s2"
        checked>玩手机
    <br><br>
    上传:<input type="file" multiple>

二.button按钮标签

type属性	解释
submit	提交按钮，点击之后提交数据给后台
reset	重置按钮，恢复默认
button	普通按钮，配合js使用

<button type="reset">
        充钱
    </button>

三.select下拉菜单

名称	解释
select	下拉菜单的整体
option	下拉菜单的每一项
selected	下拉菜单的默认选中

<select name="" id="">
        <option value="">通宵</option>
        <option value="">守夜</option>
        <option value="">熬夜</option>
    </select>

四.textarea文本域标签

名称	解释
cols	文本宽度
rows	文本行数

<textarea name="" id="" cols="30" rows="10" placeholder="不超过150字"></textarea>

五.label标签

作用：提升用户体验，使用户可通过文字或图片来进行选择

选择：
    <input type="radio" name="s1" id="s3">
    <label for="s3">好</label> 
    <label><input type="radio" name="s1">坏</label>

六.其他

div：独占一行
span：一行可以显示多个
&nbsp ; ：空格