HTML基础————表单元素

文本框：<input type="text"> 
一个文本框，一次输入一行，如果需要输入多行，<textarea>

这个写法很特别，不需要加入//////

可以设置size，value，placeholder

分别队友，大小，初始值，提示语

 

密码框：<input type="password">

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

 

表单：

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

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

默认get为提交数据的方式，method，get方式的特点为可以在浏览器的地址栏看到提交的参数

request.QueryString通过此来查看参数

当然方式还有post，post不会在地址栏显示提交的参数 
如果要提交二进制数据，比如上传文件，必须采用post方式

 

单选框：<input type="radio" >

单选1 <input type="radio" >

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

分组 ，将name设置为相同

学习java<input type="radio" name="activity" value="学习java" > <br/>

东京热<input type="radio" checked="checked"  name="activity" value="tokyohot" > <br/>

dota<input type="radio" name="activity" value="dota" > <br/>

LOL<input type="radio" name="activity"  value="lol"> <br/>

学习java 
东京热 
dota 
LOL 

 

复选框：<input type="checkbox">

也就是可以选择不选，可以多选

此处备注一下value和name

name在单选框中一样达到分组单选的作用，在复选框中甚至可以去掉，

value是提交到服务器的值，当然name也会

 

下拉列表：<select> <sption>

<select  size = "x"，multiple="multiple">//size用于设置高度，multiple表示可以ctrl+shift来多选

 <option selected="selected">苍老师</option>//select表示默认选中

 <option >高树玛利亚</option>

 <option >遥美</option>

</select>

还有中情况需要将选项分组

文本域：<Textarea>

可以设置宽度和行数

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

1234567890

1234567890

1234567890

1234567890

1234567890

1234567890

1234567890</textarea>

这里如果把rows<8，则会加上一个滚动条

如果把cols宽度改为6，则会把一行剩下的自动转移到下一行

这样真正的行数就不仅仅是8行了

普通按钮： <input type="button" value = >

提交按钮：      <submit>//一样的格式

重置按钮：      <reset>

value用来设置显示的，比如登陆，在<form>中，普通按钮不具备提交的效果

上次讲到的提交是用的submit

如果用户密码输错了怎么办？ 重置

 

<form action="/study/login.jsp">

账号：<input type="text" name="name"> <br/>

密码：<input type="password" name="password" > <br/>

<input type="submit" value="提交">

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

</form>

图像提交： <input type = "image" src = ".gif">

光是文字太枯燥，提交按钮用一个图片来替代

<form action="/study/login.jsp">

账号：<input type="text" name="name"> <br/>

密码：<input type="password" name="password" > <br/>

<input type="image" src="http://how2j.cn/example.gif">

</form>

按钮：<button>按钮</button>

与<input type="button">不同的是，<button>标签功能更为丰富 

相当于直接的功能使用，不需要input设置type

可以直接改变是否为图片 img = src，是否要提交 <button type = "submit">

<button><img src="http://how2j.cn/example.gif"/></button>

这样则可以将按钮变为图片

而如果要提交：

 

<form action="/study/login.jsp">

账号：<input type="text" name="name"> <br/>

密码：<input type="password" name="password" > <br/>

 

<button type="submit">登陆</button>

 

</form>