表单form

表单form:是一个区域,采集用户信息
表单元素:
1.input文本框,按钮,单选,复选
2.select option下拉列表
3.textarea文本域


0.form表单

<form action="数据处理网页">
表单元素
</form>
其中action属性表示收集来的数据交由哪一个页面处理

1.input

input标签包括了文本框text,密码框password,按钮:提交submit和重置reset,单选radio,复选checkbox

(1)文本框text,密码框password

a.用来设置简单的文本框,登录的密码框,区别是text明文显示,password隐藏显示
b. 属性name用来命名交给后端读取

<form>
用户名:
<input type="text"  name="UserName"/><!--明文显示-->
<br />表单元素没有自动换行功能
密码:
<input type="password" name="UserPassWord"/>
</form>

在这里插入图片描述

(2)按钮:提交和重置submit reset

submit提交将用户的数据提交给后端页面,reset则是将数据清空不提交给后端 value属性的作用是规定按钮表面的文字
爱好:
<form>
<input type="text">
<input type="submit" value="提交" name="hobby">
<input type="reset" value="重置" name="reset">		
</form>

在这里插入图片描述

(3)单选框和复选框

单选框用来规定选项中只有一项可选择,复选框则可以选择多项
属性说明:value是要给后端的数据,name是命名,checked表示是否被默认选择
单选:

<form>
性别:
男 <input type="radio" value="boy" name="gender" checked="checked" /><input type="radio" value="girl" name="gender" />
1注意这里的name要设置相同,这一组单选框才能实现单选
2checked标签表示默认选择
</form>

<form>

爱好:
音乐<input type="checkbox" valeu="1" name="music" checked="checked" />
体育<input type="checkbox" value="2" name="sport" />
阅读<input type="checkbox" value="3" name="reading" />
</form>

在这里插入图片描述

2.下拉类表框select option

下拉类表框可以节省页面空间
爱好:
<select>
	<option selected="selected">看书</option>
	<option>旅游</option>
	<option>购物</option>
	<option>跑步</option>
	<option>健身</option>
</select>

在这里插入图片描述

3.文本域textarea

个人简介:<br />
<textarea cols="50" rows="10">
提示消息:在这里输入内容........
</textarea>
<br />
<input type="submit" value="确定" />
<input type="reset" value="重置" />
</form>

在这里插入图片描述

发布了100 篇原创文章 · 获赞 56 · 访问量 4858

猜你喜欢

转载自blog.csdn.net/weixin_44307065/article/details/103894811