Web前端------表单标签
一.表单标签介绍
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>
<!-- 账号---input
id属性:每个标签都有唯一的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>三.效果呈现
