<!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>
<!--
现实生活中的表单：学员 -> 学员信息表 -> 学校 存款人 -> 银行存款单 -> 银行
一、表单：在网页中，用于搜集用户信息，将用户信息提交给后台服务器
一个表单有三个部分组成：表单域、表单控件、提示信息
1.表单域：包含所有要提交表单控件的区域，将该区域的内容交给提交给后台服务器
使用form标签创建表单域
action：用于指定提交到后台服务器地址
method:用于选择请求方式
2.表格控件：也叫表单元素，用于搜集信息的控件
input：关于输入信息的控件
type:属性用于指定输入控件的类型
name：用于设置控件的名字（后台可以通过名字获取对应控件提交的值
value：属性设置控件的值
check属性：设置默认选中状态，单选框和复选框使用checked="checked"
select下拉列表
select标签包含一个个的option列表项
selected="selected"设置默认选中状态
cols：行
rows：列
textarea文本域
3.提示信息：
label标签：用于选中表单中的提示文字
for属性对应某表单项的id值
-->
<!--表单域-->
<form action="pages/2.html"method="post">
<!--文本框-->
<label for="us">用户名：</label>
<input type="text"id="us"name="username"value="请输入用户名">
<br><br>
<!--密码框-->
密码：<input type="password"name="password">
<br><br>
<!--单选框-->
<!--注意：同组单选按钮的name属性值必须相同，单选按钮功能才可以生效-->
性别：
<input type="radio"id="ge"name="ren"value="boy"checked="checked">
<label for="ge">男</label>
<input type="radio"id="gg"name="ren"value="girl">
<label for="gg">女</label>
<br><br>
<!--复选框-->
你喜欢的老师：
<input type="checkbox"name="teather"value="lls">秃子
<input type="checkbox"name="teather"value="tls">秃子2
<input type="checkbox"name="teather"value="cls">秃子3
<input type="checkbox"name="teather"value="xls"checked="checked">无
<br><br>
<!--下拉列表-->
<!--注意：name属性为select标签指定，value属性为option指定-->
籍贯：
<select name="city">
<optgroup label="北方">
<option value="xinjiang">新疆</option>
</optgroup>
<optgroup label="有钱人的地方">
<option value="beijing"selected="selected">北京</option>
<option value="shanghai">上海</option>
</optgroup>
<br><br>
</select>
<br><br>
<!--文本域-->
<!--注意：文本域没有value属性，若需要默认值写到标签之间-->
自我介绍：
<textarea name="self"cols="30"rows="10">请输入2万字的自我介绍</textarea>
<br><br>
<!--提交按钮-->
<input type="submit"value="注册">
<!--重置按钮-->
<input type="reset">
<!--普通按钮-->
<input type="button"value="普通按钮">
<br><br>
<!--创建按钮的方式二-->
<!--相较于input创建按钮方式，略微灵活一些，因为是双标签-->
<button type="submit">注册</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
</form>
</body>
</html>
版权属于：
yu
作品采用：
《
署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
》许可协议授权
评论 (0)