博学谷 - html笔记06 - 表单标签_博学谷html练习-CSDN博客

本文链接：https://blog.csdn.net/hecr_mingong/article/details/107029951

1.使用表单的目的
方便收集用户信息

2.表单的组成

表单域
表单控件(表单元素)
提示信息

3.input标签
type属性：

属性值	描述
button	可点击按钮
chechbox	复选框
file	文件
hidden	隐藏字段
image	定义图像形式的提交按钮
password	密码框
radio	单选框
reset	复位按钮
submit	提交按钮
text	文本框

demo：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签</title>
</head>
<body>
    <form>
        <div>
            <input type="button" value="注册" name="register" />
        </div>
        <div>
            <input type="checkbox" name="hobby" checked="checked">吃饭
            <input type="checkbox" name="hobby" checked="checked">睡觉
            <input type="checkbox" name="hobby">打豆豆
        </div>
        <div>
            <input type="file" name="file">
        </div>
        <div>
            <input type="hidden" name="id">
        </div>
        <div>
            <input type="image" name="image" src="images/down.jpg">
        </div>
        <div>
            <span>密码：</span><input type="password" name="pwd">
        </div>
        <div>
            <input type="radio" name="sex">男
            <input type="radio" name="sex" checked="checked">女
        </div>
        <div>
            <input type="reset" value="复位">
        </div>
        <div>
            <input type="submit" value="提交">
        </div>
        <div>
            <span>姓名：</span><input type="text" name="name">
        </div>
    </form>
</body>
</html>

效果：
在这里插入图片描述
4.label标签
作用：
用于绑定一个表单元素, 当点击标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。

demo：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>label标签</title>
</head>
<body>
    <form action="#" method="GET">
        <input type="radio" name="sex" id="man" checked="checked"/> <label for="man">男</label>
        <input type="radio" name="sex" id="woman" /> <label for="woman">女</label>
    </form>
</body>
</html>

效果：
在这里插入图片描述
5.select标签
说明：

select 中至少包含一对option 。
在option 中定义 selected =“ selected " 时，当前项即为默认选中项。

demo：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>select标签</title>
</head>
<body>
    <form action="#">
        <select name="type">
            <option value="a">选项1</option>
            <option value="b" selected="selected">选项2</option>
            <option value="c">选项3</option>
        </select>
    </form>
</body>
</html>

效果：
在这里插入图片描述
6.textarea标签
作用：
创建多行文本输入框

demo：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>textarea标签</textarea></title>
</head>
<body>
    <form action="#">
        <textarea name="option" id="" cols="30" rows="10">文本域</textarea>
    </form>
</body>
</html>