【Web前端基础知识】HTML表单怎么创建

本篇为大家介绍一下在浏览一些网站时经常会用到的一种网页元素--表单。如下图，想必大家已经再熟悉不过了，像这样允许用户输入并使用按钮提交信息的功能，我们称之为表单，那么接下来为大家介绍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='radio' name="" value="" checked>标示符 

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

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

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

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

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

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

格式:

1. <input type='checkbox' name="" id="" value="" checked>标示 

选课:

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

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