HTML表单元素
- 文本框
input type="text 表示文本框
并且只能输入一行
如果要输入多行则要输入多行使用文本域textarea
注: 标签很特别,一般是不需要写成或者 这样的。
并且 这样的写法也是满足标准的
(1)文本框
<input type="text">
(2)设置属性size
<input type="text" size="10">
(3)有初始值的文本框
<input type="text" value="有初始值的文本框">
效果:
(4)有背景文字的文本框
<input type="text" placeholder="请输入账号">
效果:
- 密码框
<input type="password">
- 表单form
用于向服务器提交数据,比如账号和密码
(1)表单
<form action="https://how2j.cn/study/login.jsp">
账号:<input type="text" name="name"> <br/>
密码:<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
效果:
(2)method
一、method=“get” ,这是常用的数据提交方式
如果在form里没有提供method属性,则默认的是get方式提交数据
get方式的一个特点就是,可以在浏览器的地址栏看到提交的参数,即便是密码也看得到
<form method="get" action="https://how2j.cn/study/login.jsp">
账号:<input type="text" name="name"> <br/>
密码:<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
双击选中所有代码
二、method = “post”
不会在地址栏显示提交数据的参数;
如果要提交二进制数据,比如上传文件,必须采用post方式
<form method="post" action="https://how2j.cn/study/login.jsp">
账号:<input type="text" name="name"> <br/>
密码:<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
(3)post,get方式的区别
get
是form默认的提交方式如果通过一个超链访问某个地址,是get方式如果在地址栏直接输入某个地址,是get方式提交数据会在浏览器显示不可以用于提交二进制数据,比如上传文件
post
必须在form上通过 method=“post” 显示指定提交数据不会在浏览器显示出来可以用于提交二进制数据,比如上传文件
- 单选框
(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="tokyohot" > <br/>
dota<input type="radio" name="activity" value="dota" > <br/>
LOL<input type="radio" name="activity" value="lol"> <br/>
- 复选框checkbox
<p>今天晚上做什么?</p>
学习java<input type="checkbox" value="学习java" > <br/>
东京热<input type="checkbox" checked="checked" name="activity" value="tokyohot" > <br/>
dota<input type="checkbox" value="dota" > <br/>
LOL<input type="checkbox" value="lol"> <br/>
效果:
- 下拉表select
配合option使用
(1)普通下拉表
<select >
<option >苍老师</option>
<option >高树玛利亚</option>
<option >遥美</option>
</select>
效果:
(2)设置高度
<select size="2">
<option >苍老师</option>
<option >高树玛利亚</option>
<option >遥美</option>
</select>
效果:
(3)设置多选
使用ctrl 或者shift可以多选
<select size="3" multiple="multiple">
<option >苍老师</option>
<option >高树玛利亚</option>
<option >遥美</option>
</select>
效果:
(4)默认选择
select = “selected”
<select size="3" multiple="multiple">
<option >苍老师</option>
<option selected="selected">高树玛利亚</option>
<option selected="selected">遥美</option>
</select>
- 文本域textarea
文本域可以有多行,并且可以有滚动条
(1)文本域
<textarea>
abc
def
</textarea>
(2)定义宽度和行数
<textarea cols="30" rows="8">123456789012345678901234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890</textarea>
- 按钮button
<input type="button" value="一个按钮">
效果:
普通的按钮是不具备提交form的效果的
普通按钮不能提交
~~<form action="/study/login.jsp" method="get">
账号:<input type="text" name="name"> <br/>
密码:<input type="password" name="password" > <br/>
<input type="button" value="登陆">
</form>~~
- 提交按钮submit
<form action="/study/login.jsp" method="get">
账号:<input type="text" name="name"> <br/>
密码:<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
效果:
- 重置按钮reset
<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>
效果:
- 图像提交
<form action="/study/login.jsp">
账号:<input type="text" name="name"> <br/>
密码:<input type="password" name="password" > <br/>
<input type="image" src="https://how2j.cn/example.gif">
</form>
需要用到jsp
- 按钮标签/button
标签功能更为丰富
按钮标签里的内容可以是文字也可以是图像
如果button的type=“submit” ,那么它就具备提交form的功能
(1)文字按键
<button>按钮</button>
(2)图片按钮
<button><img src="https://how2j.cn/example.gif"/></button>
(3)提交数据
设置type=“submit”
IE下button的type的默认值为button不具备提交功能
其他浏览器type的默认值是submit
<form action="/study/login.jsp">
账号:<input type="text" name="name"> <br/>
密码:<input type="password" name="password" > <br/>
<button type="submit">登陆</button>
</form>