表单属性设置
<form>
标签 表示表单标签,定义整体的表单区域
- action属性 设置表单数据提交地址
- method属性 设置表单提交的方式,一般有“GET”方式和“POST”方式, 不区分大小写 【‘get’和‘post’是HTTP协议】
【get方式提交数据到web服务器以地址栏的方式提交给服务器不安全,能够看到提交的数据,严谨的说是以查询参数的方式提交给web服务器;post方式提交数据表单数据会放到请求体里面】
表单元素属性设置
- name属性 设置表单元素的名称,该名称是提交数据时的参数名
- value属性 设置表单元素的值,该值是提交数据时参数名所对应的值
表单提交案例
<form action="https://www.baidu.com" method="GET">
<p>
<label>姓名:</label><input type="text" name="username" value="张三" />
</p>
<p>
<label>密码:</label><input type="password" name="password" />
</p>
<p>
<label>性别:</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>爱好:</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片:</label>
<input type="file" name="person_pic">
</p>
<p>
<label>个人描述:</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍贯:</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<input type="reset" name="" value="重置">
</p>
</form>
运行效果:
页面注册案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册页面</title>
</head>
<body>
<!-- 为了看清界面的排版,写代码时可以先加上border值 -->
<!-- <table width="600" border="1" align="center"> -->
<table width="600" align="center">
<caption><h4>欢迎来到注册页面</h4></caption>
<!-- 1 -->
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" checked='checked' /><img src="images/man.jpg" /> 男
<input type="radio" name="sex" /><img src="images/women.jpg" /> 女
</td>
</tr>
<!-- 2 -->
<tr>
<td>生日</td>
<td>
<!-- 年份的 -->
<select name="" id="">
<option value="">--请选择年份--</option>
<option value="">1995</option>
<option value="">1996</option>
<option value="">1997</option>
</select>
<!-- 月份的 -->
<select name="" id="">
<option value="">--请选择月份--</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<!-- 日子 -->
<select name="" id="">
<option value="">--请选择日子--</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</select>
</td>
</tr>
<!-- 3 -->
<tr>
<td>所在地区</td>
<td>
<input type="text" value="北京市朝阳区">
</td>
</tr>
<!-- 4 -->
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="marry" checked="checked" /> 未婚
<input type="radio" name="marry" /> 已婚
<input type="radio" name="marry" /> 离婚
</td>
</tr>
<!-- 5 -->
<tr>
<td>学历</td>
<td>
<input type="text" value="研究生">
</td>
</tr>
<!-- 6 -->
<tr>
<td>月薪</td>
<td>
<input type="text" value="10000-20000">
</td>
</tr>
<!-- 7 -->
<tr>
<td>手机号码</td>
<td>
<input type="text">
</td>
</tr>
<!-- 8 -->
<tr>
<td>昵称</td>
<td>
<input type="text" >
</td>
</tr>
<!-- 9 -->
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="love" /> 妩媚的
<input type="checkbox" name="love" /> 可爱的
<input type="checkbox" name="love" /> 小鲜肉
<input type="checkbox" name="love" /> 老腊肉
<input type="checkbox" name="love" /> 都喜欢
</td>
</tr>
<!-- 10 -->
<tr>
<td>自我介绍</td>
<td>
<textarea name="" id="" cols="30" rows="5">自我介绍</textarea>
</td>
</tr>
<!-- 11 -->
<tr>
<td></td>
<td>
<input type="image" src="images/btn.png" />
</td>
</tr>
<!-- 12 -->
<tr>
<td></td>
<td> <input type="checkbox" name="agree" checked="checked" />我同意注册条款和会员加入标准</td>
</tr>
<!-- 13 -->
<tr>
<td></td>
<td>
<a href="#">我是会员,立即登录</a>
</td>
</tr>
<!-- 14 -->
<tr>
<td></td>
<td>
<h3>我承诺</h3>
<ul>
<li>年满18岁</li>
<li>谨遵入会规则</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
运行效果:
小结
- 表单标签的作用就是可以把用户输入数据一起提交到web服务器。
- 表单属性设置
- action: 是设置表单数据提交地址
- method: 是表单提交方式,提交方式有GET和POST
- 表单元素属性设置
- name: 表单元素的名称,用于作为提交表单数据时的参数名
- value: 表单元素的值,用于作为提交表单数据时参数名所对应的值