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>

猜你喜欢

转载自blog.csdn.net/Whiteleaf3er/article/details/83047508