表单标签
表单标签主要用于收集用户信息，常用于注册页面
常用标签及属性：
form标签：表单域：用form标签定义，包含表单元素的区域，双标签
? action属性：URL地址，用于指定接收并处理表单数据的服务器程序的url地址
? method属性：get/post,用于设置表单数据的提交方式，默认都是get
? name属性：用于指定表单的名称，区分同一页面的多个表单域
input标签：输入表单元素，单标签。type属性必写
? name属性：由用户定义，定义input元素的名称。单选按钮和复选框要有相同的name值
? value属性：表单值，直接赋值给input，一般给单选或者多选使用来返回值,主要是后台人员使用
? checked属性:用于单选和多选，当页面打开就可以默认选中这个选项
? maxlength属性：用于规定最大输入长度
? type属性的值：
? 1.button：可点击按钮（作用函数由js书写）,必须写value属性，不提交数据
? 2.text：文本
? 3.password:密码,看不但
? 4.radio：单选按钮，实现多选一
? 5.checkbox：复选
? 6.submit:提交表单按钮
? 7.reset:重新设置，将全部已经填写的信息重置为初始值，作用空间为一个表单
? 8.file：上传文件使用的
? label标签：用于绑定一个表单元素，当点击标签内的文本时，浏览器会自动将焦点或光标转到或者选择对应表单元素上，增加 用户体验
? for属性：内容和input标签的id属性必须一致。
? select标签：下拉标签，当页面选择项内容过多，节省页面空间，使用它，常用于选择地址（省份，城市，区）
? 一个select是一个下拉框，每个选择用一个option标签包裹,每个select至少需要一个option
? 默认选项：option的属性：selected=“selected”
? textarea标签：双标签 当用户要输入大量文字信息时，比如建议，评价时使用，是一个大号的,可以直接显示空格
? cols:可写列数
? rows:可写行数
? 一般使用css来设置行列数
? 但是可以超出书写，会自动生成一个滚条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单标签</title>
<!-- 表单标签：收集用户信息，常用于注册页面 -->
<!-- 一个表单由表单域、表单控件、提示信息三部分组成 -->
</head>
<body>
<!-- 表单域：用form标签定义，包含表单元素的区域 -->
<!-- form会把它范围内的表单元素信息提交给服务器 -->
<!-- <form action="URL地址" method="提交方式" name="表单域名称"> 控件 </form> -->
<!--
form常用属性：
1.action：
属性值：url地址，用于指定接收并处理表单数据的服务器程序的url地址
2.method：（提交方式）
属性值：get/post,用于设置表单数据的提交方式，默认都是get
3.name:
属性值：名称，用于指定表单的名称，区分同一页面的多个表单域。
-->
<form action="demo.php" method="get" name="name1">
<!-- form标签就是表单域，主要在服务器编程中学习 -->
<!--
input：输入表单元素，单标签。type属性必写。
name属性：由用户定义，定义input元素的名称。单选按钮和复选框要有相同的name值
value属性：表单值，直接赋值给input，一般给单选或者多选使用来返回值,主要是后台人员使用
checked属性:用于单选和多选，当页面打开就可以默认选中这个选项
maxlength属性：用于规定最大输入长度
type属性的值：
1.button：可点击按钮（作用函数由js书写）,必须写value属性，不提交数据
2.text：文本
3.password:密码,看不但
4.radio：单选按钮，实现多选一
5.checkbox：复选
6.submit:提交表单按钮
7.reset:重新设置，将全部已经填写的信息重置为初始值
8.file：上传文件使用的
-->
请上传头像:<input type="file"><br>
<label for="text">用户名</label>
<input type="text" id="text"> <br>
用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
密码：<input type="password" name="password" value=""> <br>
电话：<input type="text" name="number" maxlength="11">
<!-- 按钮 -->
<input type="button" name="code anniu" value="获取验证码"> <br>
输入验证码：<input type="text" name="yanzhengma " > <br>
<!--
label标签：用于绑定一个表单元素，当点击标签内的文本时，浏览器会自动将焦点或光标转到或者选择对应表单元素上，增加用户体验
for属性内容和input标签的id属性必须一致。
-->
<!-- name是表单元素的名字，这里性别单选按钮必须有相同的名字name，才可以实现多选一 -->
性别：男<input type="radio" name="sex" value="男" checked="checked"> 女<input type="radio" name="sex" value="女"> <br>
性别：
<label for="radio_nan">男</label>
<input type="radio" name="sex" value="man" checked="checked" id="radio_nan">
<label for="radio_nv">女</label>
<input type="radio" name="sex" value="woman" id="radio_nv"> <br>
爱好：吃饭<input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby" value="睡觉" checked="checked">
打豆豆<input type="checkbox" name="bobby" value="打豆豆"> <br>
<!--
select标签：下拉标签，当页面选择项内容过多，节省页面空间，使用它，常用于选择地址（省份，城市，区）
一个select是一个下拉框，每个选择用一个option标签包裹,每个select至少需要一个option
默认选项：option的属性：selected="selected"
-->
籍贯：
<select name="jiguan" id="">
<option value="">陕西</option>
<option value="">山东</option>
<option value="">四川</option>
</select>
<br>
默认籍贯案例：
<select name="" id="">
<option value="">陕西</option>
<option value="">山东</option>
<option value="" selected="selected">四川</option>
</select>
<br>
<!--
textarea标签：双标签 当用户要输入大量文字信息时，比如建议，评价时使用，是一个大号的<input type="text">,可以直接显示空格
cols:可写列数
rows:可写行数
一般使用css来设置行列数
但是可以超出书写，会自动生成一个滚条
-->
建议： <textarea name="" id="" cols="10" rows="5">请在这里输入您对我们的建议</textarea> <br>
<input type="submit">
<input type="submit" value="免费注册">
<!-- 重置按钮的作用区间是整个表单，不在表单中将会失效 -->
<input type="reset">
</form>
</body>
</html>
|