1、基本结构
<form action="" method="get">
<label>输入框</label>
<input type="text" />
<button type="submit">提交</button>
</form>
2. form介绍
- 作用:将前台用户数据通过get或post请求方式提交给后台,并在新页面标签中接收后台相应
- action:提交的后台接口(请求的服务器指定路径)
- method : 请求方式:
----- get:将数据以url链接拼接方式提交给后台,速度快,但安全性低,且有数据大小限制
----- post:将数据以数据包方式提交给后台,速度较慢,但安全性高,且无数据大小限制
- 前后台交换数据的依据为:表单元素的name与value,name为key,value为value
3、input常用类型
text、password、hidden、radio、checkbox、reset、submit
3、常用类型标签
<input type="text" name="username" placeholder="请输入用户名" size="10" maxlength="15">
<input type="password" name="pwd" placeholder="请输入密码" maxlength="12">
- 单选框 : name必须相同 , value需要提前规定 , checked为默认选中
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
- 复选框 : name必须相同 , checked为默认选中
<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"> 棒球
- 下拉选项 : 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"></textarea>
<textarea name="content" cols="30" rows="10"></textarea>
<!--提交按钮 提交的是同一个form下的所有value -->
<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、全局属性
5、伪类
