<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 表单标签</title>
<style type="text/css">
</style>
</head>
<body>
<!--form表单 行级元素
属性：
action ：设置要访问的的链接
method: 提交数据的方式（提交数据到服务器的方式） 默认提交方式为get
form中的关键标签：input
input中的type属性，决定input标签的形态！
input的属性type可以赋的值
1.type="text" 普通的文本输入框
2.type="password" 密码输入框
3.type="radio" 单选框
4.type="checkbox" 复选框
5.type="submit"> 提交按钮 注意一点 一旦点击此按钮，会立马响应action=链接
。并且将用户输入的值提交到该链接中
6.type="reset" 重置按钮 ，点击此按钮，输入框的值会被重置
7.type="color" 颜色选框
8.type="file" 文件选择框
name的名字用于提交数据，用于链接提交数据标签识别！
value属性 标签的默认值
placeholder属性 标签的提示性文本
单选框、复选框默认选项 checked
下拉框的默认选项是selected
必填选项 required
-->
<form action="" method="">
<!--1、普通文本text-->
<label for="name">账号:</label>
<input type="text" name="name" id="name" required="required" placeholder="请输入账号"/>
<br /><br />
<!--2、密码类型 password-->
<label for="password">密码:</label>
<input type="password" name="password" id="password" required placeholder="请输入密码" />
<br /><br />
<!--3、年龄 数字框 number-->
<label for="number">年龄：</label>
<input type="number" name="number" id="number" placeholder="请输入年龄" />
<br /><br />
<!--4、性别 单选框 radio
关键属性 name ，name值一致，单选才会成立
-->
<label>性别：</label>
<input type="radio" name="sex"/>男
<input type="radio" name="sex" checked="checked"/>女
<br /><br />
<!--5、复选框checkbox-->
<label>爱好：</label>
<input type="checkbox" checked="checked"/>唱歌
<input type="checkbox" checked/>跳舞
<input type="checkbox"/>篮球
<input type="checkbox"/>足球
<br /><br />
<!--6、头像 文件类型 file-->
<label for="">头像:</label>
<input type="file" />
<br /><br />
<!--7、生日 date /time.....-->
<label for="">出生日期：</label>
<input type="date" />
<br /><br />
<!--8、常用 下拉框 select -->
<label for="">地区：</label>
<select name="">
<option value="">郑州</option>
<option value="">广州</option>
<option value="" selected="selected">泉州</option>
<option value="">兰州</option>
<option value="">杭州</option>
</select>
<br /><br />
<!--9、文本域 textarea
rows控制行数 决定标签的高度！
cols控制列数 决定标签的宽度!
会自动换行-->
<label>个人简介：</label>
<textarea name="" rows="10" cols="20">
</textarea><br /><br />
<!--10. color色板 -->
<label> 颜色：</label>
<input type="color" />
<br /><br />
<!--11、进度 range-->
<label>进度：</label>
<input type="range" />
<br /><br />
<!--12、关键 按钮系列 submit reset button
button普通按钮，需要搭配js使用
-->
<input type="submit" value="提交" />
<input type="reset" value="重置" />
<input type="button" value="普通按钮" />
</form>
</body>
</html>
网友评论