表单
## 表单
#### 1、基本结构
```html
<form>
<label>输入框</label><input type="text" />
<button type="submit">提交</button>
</form>
```
#### 2、input常用类型
```html
text、password、hidden、radio、checkbox、reset、submit
```
#### 3、常用类型标签
- 文本框
```html
<input type="text" name="username" placeholder="请输入用户名" size="10" maxlength="15">
```
- 密文框
```html
<input type="password" name="pwd" placeholder="请输入密码" maxlength="12">
```
- 单选框
```html
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
```
- 复选框
```html
<input type="checkbox" name="hobby" value="basketball"> 篮球
<input type="checkbox" name="hobby" value="football"> 足球
<input type="checkbox" name="hobby" value="ping-pong" checked> 乒乓球
<input type="checkbox" name="hobby" value="baseball"> 棒球
```
- 下拉选项
```html
<select name="major">
<option value="computer">计算机</option>
<option value="archaeology">考古学</option>
<option value="medicine" selected>医学</option>
<option value="Architecture">建筑学</option>
<option value="Biology">生物学</option>
</select>
<!--多选-->
<select name="major" multiple>
<option value="computer">计算机</option>
<option value="archaeology">考古学</option>
<option value="medicine">医学</option>
<option value="Architecture">建筑学</option>
<option value="Biology">生物学</option>
</select>
```
- 多行文本输入
```html
<textarea name="content"></textarea>
<textarea name="content" cols="30" rows="10"></textarea>
```
- 按钮
```html
<!--提交按钮-->
<input type="submit" value="提交">
<button>提交</button>
<button type="submit">提交</button>
<!--重置按钮-->
<input type="reset" value="重置">
<button type="reset">重置</button>
<!--普通按钮-->
<input type="button" value="按钮">
<button type="button">按钮</button>
```
#### 4、全局属性
- required：必填项
- pattern：正则
#### 5、伪类
- focus：获得焦点
二 代码示范
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!-- form -->
<!-- 作用:将前台用户数据通过get或post请求方式提交给后台,并在新页面标签中接收后台相应 -->
<!-- 请求方式: -->
<!-- get:将数据以url链接拼接方式提交给后台,速度快,但安全性低,且有数据大小限制 -->
<!-- post:将数据以数据包方式提交给后台,速度较慢,但安全性高,且无数据大小限制 -->
<!-- 前后台交换数据的依据为:表单元素的name与value,name为key,value为value -->
<!-- action:提交的后台接口(请求的服务器指定路径) -->
<!-- method:请求方式 -->
<form action="" method="get">
<div>
<!-- 提交给后台的就是表单元素的name=value -->
<label>用户名:</label><input type="text" name="usr" value="hehe" />
</div>
<div>
<!-- placeholder:文本占位符 -->
<label>密码:</label><input type="password" name="ps" placeholder="请输入密码" />
</div>
<div>
<button type="submit">提交</button>
</div>
</form>
<!-- 常用表单元素 -->
<form>
<!-- 明文输入框 -->
<input type="text" name="username" placeholder="请输入用户名" size="10" maxlength="15">
<!-- 密文输入框 -->
<input type="password" name="pwd" placeholder="请输入密码" maxlength="12">
<!-- 单选框:name必须相同,value需要提前规定 -->
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
<!-- 复选框:name必须相同,checked(boolean类型属性) -->
<input type="checkbox" name="hobby" value="basketball"> 篮球
<input type="checkbox" name="hobby" value="football" checked"> 足球
<input type="checkbox" name="hobby" value="ping-pong" checked="checked"> 乒乓球
<input type="checkbox" name="hobby" value="baseball"> 棒球
<!-- 单选下拉框:name由select设置,value由option提供,selected默认项 -->
<select name="major">
<option value="computer">计算机</option>
<option value="archaeology">考古学</option>
<option value="medicine" selected>医学</option>
<option value="Architecture">建筑学</option>
<option value="Biology">生物学</option>
</select>
<!-- 多选下拉框 -->
<select name="major" multiple>
<option value="computer">计算机</option>
<option value="archaeology">考古学</option>
<option value="medicine">医学</option>
<option value="Architecture">建筑学</option>
<option value="Biology">生物学</option>
</select>
<!-- 多行文本 -->
<textarea name="content" cols="30" rows="10"></textarea>
<!-- 全局属性设置 -->
<!-- required:value不能为空 -->
<input type="text" name="usr" required />
<input type="text" name="name" pattern="\d" />
<!-- 按钮 -->
<!-- 重置 -->
<input type="reset" value="自定义重置" />
<!-- 提交 -->
<input type="submit" value="请求">
<!-- 普通按钮 -->
<input type="button" value="普通按钮" onclick="alert('你丫真帅')">
</form>
<style type="text/css">
.box {
width: 200px;
height: 0;
background-color: red;
/*display: none;*/
transition: .5s;
}
.usr:focus + .box {
/*display: block;*/
height: 200px;
}
</style>
<form>
<input id="usr" class="usr" type="text" name="usr">
<div class="box"></div>
</form>
</body>
</html>
