HTML表单元素1（文本框、密码框、表单、单选框、复选框、下拉列表、文本域）

HTML的文本框 <INPUT TYPE="TEXT">

<input type="text"> 即表示文本框 

并且只能够输入一行 

如果要输入多行 

使用文本域<textarea> 

注： <input> 标签很特别，一般是不需要写成<input />或者<input></input> 这样的。 

并且<input> 这样的写法也是满足标准的

1.文本框

<input type="text">

2.设置文本框的长度

使用属性size

<input type="text" size="10">

3.初始值

使用属性value

<input type="text" value="有初始值的文本框">

4.有背景文字的文本框

使用属性placeholder 

placeholder是一个html5的属性，对于大多数的已经支持html5的浏览器来说，是可以看到效果的，但是对于老的不支持html5的浏览器，比如ie8，就看不到效果

<input type="text" placeholder="请输入账号">

<INPUT TYPE="PASSWORD">

密码框

输入的数据会自动显示为星号

<input type="password"> 即表示密码框

HTML的表单标签<FORM>，以及GET和POST的区别

<form>用于向服务器提交数据，比如账号密码

1.表单

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

这里把数据提交到服务端的login.jsp去了

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

2.method="get"

使用method="get" 提交数据 是常用的提交数据的方式 

如果form元素没有提供method属性，默认就是get方式提交数据 

get方式的一个特点就是，可以在浏览器的地址栏看到提交的参数，即便是密码也看得到

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

3.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>

4.get和post的区别

get 

是form默认的提交方式 

如果通过一个超链访问某个地址，是get方式 

如果在地址栏直接输入某个地址，是get方式 

提交数据会在浏览器显示出来 

不可以用于提交二进制数据，比如上传文件 

post 

必须在form上通过 method="post" 显示指定 

提交数据不会在浏览器显示出来 

可以用于提交二进制数据，比如上传文件

HTML的单选框 <INPUT TYPE="RADIO" >

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

1.单选框

两个单选，都可以同时选中。 为了达到，同一时间，只能选中其一的效果，需要使用分组

单选1 <input type="radio" >
单选2 <input type="radio" >

2.默认选中

默认选中 <input type="radio" checked="checked" >

3.分组

分组即，多个单选框，都在一个分组里，同一时间，只能选中一个单选框 

设置name属性相同即可

<p>今天晚上做什么？</p>

学习java<input type="radio" name="activity" value="学习java" > <br/>
东京<input type="radio" checked="checked"  name="activity" value="tokyo" > <br/>
dota<input type="radio" name="activity" value="dota" > <br/>
LOL<input type="radio" name="activity"  value="lol"> <br/>

HTML的复选框 <INPUT TYPE="CHECKBOX">

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

1复选框.（name不一定要相同，没影响，提交到后台才有用到）

<p>今天晚上做什么？</p>

学习java<input type="checkbox" value="学习java" > <br/>
东京<input type="checkbox" checked="checked"  name="activity" value="tokyo" > <br/>
dota<input type="checkbox" value="dota" > <br/>
LOL<input type="checkbox" value="lol"> <br/>

HTML的下拉列表 <SELECT> 详解

<select> 即下拉列表 

需要配合<option>使用

1.下拉列表

<select >
<option >1</option>
<option >2</option>
<option >3</option>
</select>

2.设置高度

使用属性size

<select  size="2">
<option >1</option>
<option >2</option>
<option >3</option>
</select>

3.设置可以多选

使用ctrl或者shift进行多选

<select size="3" multiple="multiple">
<option >1</option>
<option >2</option>
<option >3</option>
</select>

4.默认选中

对option元素设置selected="selected" 属性

<select size="3" multiple="multiple">
<option >1</option>
<option selected="selected">2</option>
<option selected="selected">3</option>
</select>

HTML的多行文本框-文本域 <TEXTAREA>

<textarea> 即文本域 

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

1.文本域

<textarea>abc
def
</textarea>

2.设置宽度和行数

使用属性cols和rows

<textarea cols="30" rows="8">123456789012345678901234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890</textarea>