HTML（二）表单

HTML 表单用于搜集不同类型的用户输入,用于向服务器提交数据。

<form> </form>

action="/study/login.jsp" 表示把账号和密码提交到login.jsp这个页面去

method="get"

使用method="get" 提交数据 是常用的提交数据的方式
如果form元素没有提供method属性，默认就是get方式提交数据
get方式的一个特点就是，可以在浏览器的地址栏看到提交的参数，即便是密码也看得到

method="post"

使用method="post" 也可以提交数据
post不会在地址栏显示提交的参数
如果要提交二进制数据，比如上传文件，必须采用post方式

<form method="post" action="http://how2j.cn/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>

1.<input> 元素

<input> 元素是最重要的表单元素。

<input> 元素有很多形态，根据不同的 type 属性。

文本输入

<input type="text"> 定义用于文本输入的单行输入字段(默认宽度是 20 个字符)：

密码输入 

<input type="password">

<form>
		用户名：<br />
		<input type="text" name="name"> <br/>
		密码：<br/>
		<input type="password" name="password">
	</form>

2.单选框 

<input type="radio" > 表示单选框

两个单选，都可以同时选中。可以默认选中  checked="checked"

接受 <input type="radio" checked="checked" >
		不接受<input type="radio"  > 

如果为了达到，同一时间，只能选中其一的效果，需要使用分组

分组即，多个单选框，都在一个分组里，同一时间，只能选中一个单选框
设置name属性相同即可

<p>你喜欢哪个球队？（单选）</p>
 
利物浦<input type="radio" name="love" value="利物浦" checked="checked" > <br/>
曼联<input type="radio"  name="love" value="曼联" > <br/>
皇马<input type="radio" name="love" value="皇马" > <br/>
切尔西<input type="radio" name="love"  value="切尔西"> <br/>

<p>你喜欢哪个球队？（多选）</p>
 
利物浦<input type="checkbox"  value="利物浦" checked="checked" > <br/>
曼联<input type="checkbox"   value="曼联" > <br/>
皇马<input type="checkbox" value="皇马" > <br/>
切尔西<input type="checkbox" value="切尔西"> <br/>

<input type="checkbox"> 即表示复选框

<p>你喜欢哪个球队？（多选）</p>
 
利物浦<input type="checkbox"  value="利物浦" checked="checked" > <br/>
曼联<input type="checkbox"   value="曼联" > <br/>
皇马<input type="checkbox" value="皇马" > <br/>
切尔西<input type="checkbox" value="切尔西"> <br/>

3.<select>下拉列表

<select> 即下拉列表
需要配合<option>使用

<select >
 <option >勇士</option>
 <option >火箭</option>
 <option >湖人</option>
</select>

 

默认选中 ：对option元素设置selected="selected" 属性 

4.文本域

<textarea> 即文本域
与文本框不同的是，文本域可以有多行，并且可以有滚动条

5.按钮

5.1普通按钮

<input type="button" value="一个按钮">

普通按钮不能提交

5.2提交按钮
 

<form action="/study/login.jsp" method="get">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>

5.2重置按钮

<input type="reset" value="重置">