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">
html内容文本框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>
使⽤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>
使⽤method="post" 也可以提交数据
post不会在地址栏显⽰提交的参数
如果要提交⼆进制数据，⽐如上传⽂件，必须采⽤post⽅式
<form method="post" action="how2j/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
<和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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。