web前端

本篇为大家介绍一下在浏览一些网站时经常会用到的一种网页元素--表单。如下图，想必大家已经再熟悉不过了，像这样允许用户输入并使用按钮提交信息的功能，我们称之为表单，那么接下来为大家介绍HTML表单相关的一些知识点，希望对大家有所帮助。

1)表单:帮助服务器收集客户端信息的一种机制

1. <form action="提交到的页面" method="提交的方法">
2. 表单控件
3. form>

action:数据最后所提交的页面 绝对路径/相对路径

method:数据提交服务器时的提交方法 post get

2)表单控件:表单用于用户填写信息的控件

1、文本控件: 用于用户填写较少信息，且可以显示用户填写信息的控件

(注册时，用户名填写)

格式:

1. <input type="text" name="" id="" value="" size="" placeholder=""/>

type:设置控件样式 text

name:用于表单收集信息的一种标示符，也就是控件的名称

2、密码框:只是用户输入的内容看不到

1. <input type="password" name="" id="" size=""/>

3、单选按钮组:由多个单选按钮组成的按钮组，只能选中其中一个，这种按钮组

1. <input type=&#39;radio&#39; name="" value="" checked>标示符

name:为了保证传递服务器数据只有一个，所以name值必须相同

value：是用提交服务器时，该标签被提交的数据,value不能相同;

checked:默认按钮组中的那个按钮被选中

1. 性别:<input type=&#39;radio&#39; name="" value="" checked>男
2. <input type=&#39;radio&#39; name="" value="" checked>女
3. <input type=&#39;radio&#39; name="" value="" checked>保密

所有表单控件name值不能相同!!!

4、复选按钮组: 与单选按钮组的区别可以选择多个，为了能将用户选择的多项内容传递服务器中，要将name名字后面加个[]

格式:

1. <input type=&#39;checkbox&#39; name="" id="" value="" checked>标示

选课:

1. <input type=&#39;checkbox&#39; name=&#39;classes[]&#39; checked value=&#39;1&#39;>语文
2. <input type=&#39;checkbox&#39; name=&#39;classes[]&#39; value=&#39;2&#39;>数学
3. <input type=&#39;checkbox&#39; name=&#39;classes[]&#39; value=&#39;3&#39;>历史
4. <input type=&#39;checkbox&#39; name=&#39;classes[]&#39; value=&#39;4&#39;>政治
5. <input type=&#39;checkbox&#39; name=&#39;classes[]&#39; value=&#39;5&#39;>物理
6. <input type=&#39;checkbox&#39; name=&#39;classes[]&#39; value=&#39;6&#39;>化学
7. <input type=&#39;checkbox&#39; name=&#39;classes[]&#39; checked value=&#39;7&#39;>美术

注意：一定要在name属性后面添加[]

5)下拉列表框:

格式:

1. <select name="" >
2. <option value="" selected>下拉列表项option>
3. <option value="" >下拉列表项option>
4. <option value="" >下拉列表项option>
5. <option value="" >下拉列表项option>
6. <option value="" >下拉列表项option>
7. select>

multiple:允许用户选中多个下拉列表项

optgroup: 设置下拉分类标示

6) 文本域：可以输入多行数据的表单控件

1. <textarea name="" id="" cols="" rows="">
2. 内容
3. textarea>

rows:设置文本域可以输入的行数

cols:设置的文本域输入的列数(一行可以输入多少个字符)(不是PX)

个人介绍:

1. <textarea name=&#39;descs&#39; cols="50" rows="10">
2. 我是个学生
3. textarea>

7)隐藏域：

1. <input type="hidden" name = “”value =””>

8)上传控件：

1. <input type="file" name=””>

9)按钮标签:

普通按钮:为js提供的控件

1. <input type=&#39;button&#39; name=”” value=""/>

value：按钮中显示的数据和提交到服务器后该控件提交的值

1. <input type=&#39;button&#39; name=&#39;clicks&#39; value="点我"/>

提交按钮:点击后可以提交表单

1. <input type=&#39;submit&#39; name="add" value=&#39;注册&#39;/>

重置按钮:点击后可以将用户输入的数据清空

1. <input type=&#39;reset&#39; name=&#39;cancel&#39; value=&#39;重置&#39;>

图片提交按钮:使用图片作为提交按钮

1. <input type=&#39;image&#39; src=&#39;图片地址&#39; name=””>

本文的分享就到这，感兴趣的同学可以自己试试看噢!