cgb2109-day08
Posted cgblpx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了cgb2109-day08相关的知识，希望对你有一定的参考价值。
文章目录
一, 表单标签
–1,用户注册表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 表单</title>
</head>
<body>
<!-- 表单标签,用来提交数据 -->
<form>
<table bgcolor="pink" border="1px" cellspacing="0px">
<tr>
<td align="center" colspan="2">
<h1>注册表单</h1>
</td>
</tr>
<tr>
<td>用户名:</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td>昵称:</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>邮箱:</td>
<td>
<input type="email" />
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" />男
<input type="radio" />女
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" />篮球
<input type="checkbox" />足球
<input type="checkbox" />乒乓球
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<!-- select是定义下拉框,option是下拉选项 -->
<select>
<option>-请选择-</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
</td>
</tr>
<tr>
<td>头像:</td>
<td>
<input type="file" />
</td>
</tr>
<tr>
<td>验证码:</td>
<td>
<input type="text" />
<img src="a.png" />
<button>点我换一张</button>
</td>
</tr>
<tr>
<td>自我描述:</td>
<td>
<!-- textarea是文本域,用来写大段文字的 -->
<textarea>在这儿写信息...</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit">提交</button>
<button>重置</button>
</td>
</tr>
</table>
</form>
</body>
</html>
–2,提交数据的细节处理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 表单</title>
</head>
<body>
<!-- 表单标签,用来提交数据
1,标签:form表单,table表格,tr行,td列,th表头,h1标题,
select是下拉框,option是下拉选项,textarea文本域
2,属性:type="file"是浏览文件,type="email"是邮箱,align是元素的位置
3,提交数据的要求:必须用form标签+必须有submit按钮+必须有name属性
提交的数据都在地址栏:被拼接在了?之后
http://127.0.0.1:8848/cgb2109/test6.html?user=rose&pwd=123
name属性的值=浏览器上输入的值
4,name用来收集用户从浏览器填的数据,value用来设置提交的值
5,数据提交的方式!!!: get和post
get方式: 默认的就是get方式,数据拼接在地址栏中,缺点是不安全,长度受限
post方式:好处是安全,数据大小没有要求,但是数据不在地址栏展示了
6,method属性用来设置数据的提交方式默认是get,
action属性用来指定是哪段java程序来处理这次提交的数据
-->
<form method="post" action="#">
<table bgcolor="pink" border="1px" cellspacing="0px">
<tr>
<td align="center" colspan="2">
<h1>注册表单</h1>
</td>
</tr>
<tr>
<td>用户名:</td>
<td>
<input type="text" name="user"/>
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" name="pwd"/>
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type="password" name="repwd"/>
</td>
</tr>
<tr>
<td>昵称:</td>
<td>
<input type="text" name="nick"/>
</td>
</tr>
<tr>
<td>邮箱:</td>
<td>
<input type="email" name="mail"/>
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0"/>女
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" name="hobby" value="1"/>篮球
<input type="checkbox" name="hobby" value="2"/>足球
<input type="checkbox" name="hobby" value="3"/>乒乓球
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<!-- select是定义下拉框,option是下拉选项 -->
<select name="city">
<option value="">-请选择-</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
</td>
</tr>
<tr>
<td>头像:</td>
<td>
<input type="file" />
</td>
</tr>
<tr>
<td>验证码:</td>
<td>
<input type="text" />
<img src="a.png" />
<button>点我换一张</button>
</td>
</tr>
<tr>
<td>自我描述:</td>
<td>
<!-- textarea是文本域,用来写大段文字的 -->
<textarea>在这儿写信息...</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit">提交</button>
<button>重置</button>
</td>
</tr>
</table>
</form>
</body>
</html>
–3,其他标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 其他标签</title>
</head>
<body>
<!--0. 都可以包括各种数据,效果不同.
每个div独占一行, 每个p独占一行,多个span会在一行
-->
<div>你好</div>
<div>你好</div>
<div>你好</div>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<span>你好</span>
<span>你好</span>
<span>你好</span>
<!-- 1.音频 controls属性必须有的,用来作为控制器-->
<audio controls="controls">
<!-- 指定资源的位置 -->
<source src="jay.mp3"></source>
</audio>
<!-- 2.视频 controls属性必须有的,用来作为控制器-->
<video controls="controls">
<source src="b.mp4"></source>
</video>
</body>
</html>
二,练习学生信息系统
–1,效果
–2,代码
<!DOCTYPE html>
<html>
<head>
<meta charset=cgb2109-day06