文本框:<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
>