一.表单标签介绍
1.认识表单
表单---类似于日常生活中的申请单
都是去填写一些信息去申请某个功能，例如：账号+密码+昵称，登陆网站
2.常见标签
常见的标签
<form></form> 表单标签，所有表单信息都包含在这个标签内部
<input type="text"> 单行文本输入框一般用于输入账号,昵称
<input type="password"> 密码输入框
<input type="radio"> 单选框
<input type="checkbox"> 复选框
<input type="file"> 文件选择框，例如：选择用户头像
<input type="date"> 日期选择框，例如：选择用户生日
<input type="number"> 数字输入框，例如：输入用户年龄
<input type="emali"> 邮件输入框
<input type="url"> 网址输入框，例如：输入个人主页网址
<input type="color"> 颜色选择框
<input type="button"> 普通按钮
<input type="image"> 图片按钮
<input type="reset"> 重置按钮，清空填写的信息
<input type="submit"> 提交按钮，点击之后将表单数据提交并处理给相应地址
<select></select> 下拉列表框，例如：选择收货地址
<textarea></textarea> 多行文本输入框，例如：输入商品描述，个人简介
<label></label> 提示信息标签二.代码展示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单案例</title>
</head>
<body><h3>收录用户信息</h3><!-- form: 表单标签，所有与表单相关的信息都包含在其中action：提交给谁处理，一般是一个网址，默认#（当前网页自己）method：提交方式，常见get(默认)/post --><form action="#" method="get"></form><!-- 账号---inputid属性:每个标签都有唯一的id属性，类似人的身份证号码placehold：输入框中用于占位的提示信息，一旦输入内容这个提示信息会消失--><label for="zhanghao">账号：</label><input type="text" id="zhanghao" placeholder="请输入账号"><p><label for="miam">密码：</label><input type="password" id="mima" placeholder="请输入密码"></p><p><label for="querenmima">确认密码：</label><input type="password" id="qurenmima" placeholder="请确认密码"></p><p><label for="touxiang">选择头像：</label><input type="file" ></p><p><label for="nicheng">昵称：</label><input type="text" id="nicheng" placeholder="请输入昵称"></p><p><label for="xingbie">性别：</label><input type="radio" id="xingbie" value="男" name="xb">男<input type="radio" id="xingbie1" value="女" name="xb">女</p><p><label for="nianling">年龄：</label><input type="number" id="nianling" placeholder="请输入年龄"></p><p><label for="youxiang">邮箱：</label><input type="email" id="youxiang" placeholder="请输入邮箱"></p><p><label for="gerenzhuye">个人主页：</label><input type="url" id="gerenzhuye" placeholder="请输入个人主页"></p><p><label for="shengri">生日：</label><input type="date" id="shengri" placeholder="请输入生日"></p><p><label for="aihao">爱好：</label><input type="checkbox" value="音乐">音乐<input type="checkbox" value="读书">读书<input type="checkbox" value="看报">看报<input type="checkbox" value="编程">编程</p><p><label for="dizhi">家庭地址：</label><select id="dizhi"><option>陕西</option><option>山西</option><option>河北</option><option>湖北</option><option>湖南</option></select></p><p><label for="yanse">喜欢颜色：</label><input type="color" id="yanse" placeholder="请选择颜色"></p><p><input type="reset" value="清空数据"><input type="submit" value="提交"></p>
</body>
</html>三.效果呈现
