HTML文本框
<input type="text"> 即表示文本框
并且只能够输入一行
如果要输入多行
使用文本域<textarea>
注： <input> 标签很特别，一般是不需要写成<input />或者<input></input> 这样的。
并且<input> 这样的写法也是满足标准的
<input type= "text">
设置文本框的长度 ,使用属性size
<input type= "text" size="10">
初始值使用属性value
<input type="text" value="有初始值的文本框">
有背景文字的文本框,使用属性placeholder
<input type="text" placeholder="请输入账号">
HTML密码框
输入的数据会自动显示为星号
<input type="password">
HTML表单
<form>用于向服务器提交数据，比如账号密码
action="/study/login.jsp" 表示把账号和密码提交到login.jsp这个页面去
<form action="http://how2j.cn/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password"> <br/>
<input type="submit" value="登陆">
</form>
使用method="get" 提交数据 是常用的提交数据的方式
如果form元素没有提供method属性，默认就是get方式提交数据
get方式的一个特点就是，可以在浏览器的地址栏看到提交的参数，即便是密码也看得到
<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>
使用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>
get和post的区别
get
是form默认的提交方式
如果通过一个超链访问某个地址，是get方式
如果在地址栏直接输入某个地址，是get方式
提交数据会在浏览器显示出来
不可以用于提交二进制数据，比如上传文件
post
必须在form上通过 method="post" 显示指定
提交数据不会在浏览器显示出来
可以用于提交二进制数据，比如上传文件
HTML单选框
<input type="radio" > 表示单选框
两个单选，都可以同时选中。 为了达到，同一时间，只能选中其一的效果，需要使用分组
单选1 <input type="radio">
单选2 <input type="radio">
默认选中
默认选中 <input type="radio" checked="checked" >
分组：多个单选框，都在一个分组里，同一时间，只能选中一个单选框
设置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/>
HTML复选框
<input type="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/>
HTML下拉列表
<select> 即下拉列表
需要配合<option>使用
<select>
<option>苍老师</option>
<option>高树玛利亚</option>
<option>遥美</option>
</select>
设置高度 ，使用属性size
<select size="2">
<option>苍老师</option>
<option>高树玛利亚</option>
<option>遥美</option>
</select>
设置可以多选，使用ctrl或者shift进行多选
<select size="3" multiple="multiple">
<option>苍老师</option>
<option>高树玛利亚</option>
<option>遥美</option>
</select>
默认选中，对option元素设置selected="selected" 属性
<select size="3" multiple="multiple">
<option>苍老师</option>
<option selected="selected">高树玛利亚</option>
<option selected="selected">遥美</option>
</select>
网友评论