表单元素01

文档：

表单元素

一、表单元素汇总
form:表示HTML表单
input:表示用来收集用户输入数据的控件
textarea:表示可以输入多行文本的控件
select:表示用来提供一组固定的选项
option:表示提供一个选项
optgroup:表示一组相关的option元素
buttton:表示可用来提交或者重置的表单按钮（或一般按钮）
datalist:定义一组提供给用户的建议值
fieldset:表示一组表单元素
legend:表示fieldset元素的说明性标签
label:表示表单元素的说明标签
output:表示计算结果

二、表单元素解析
1、定义表单
      

  用户名：
  提交
 
元素主要是定义本身是一组表单。
属性：
action：表示表单提交的页面,默认提交给当前页面
method:表示表单的请求方式，post和get两种，默认get
enctype:浏览器发送给服务器的数据所采用的编码格式。不建议使用
name:设置表单的名称，以便程序调用
target:设置提交时的目标位置
autocomplete:设置浏览器记住用户输入的数据，实现自动完成表单。默认为on自动完成，如果不想自动完成则设置成off.
novalidate:设置是否执行客户端数据有效性检查。

2、input：用户输入数据
属性
autofocus:让光标聚焦在某个input元素上，让用户直接输入。
disabled：禁用input元素，禁用后改input不能输入文本了。
autocomplete:单独设置input元素的自动完成功能。
form：让表单外的元素和指定的表单挂钩提交。
type：input元素的类型，内容较多，将在下节课讲解。
name：定义input元素的名称，以便接收到相应的值。

      
  用户名：
  提交

  
 
 

  电子邮件：

3、label标签：添加说明标签
     

  
  用户名：
  提交


 
 
  电子邮件：
 
 


能够实现当点击 “用户名”的时候，光标也会显示在用户名后面的输入框中。让用户体验更好。

4、fieldset：对表单进行编组
fieldset元素可以将一些表单元素组织在一起，形成一个整体。
属性：
name：给分组定义一个名字。
form：让表单外的分组与表单挂钩
disable:禁用分组内的表单

5、legend添加分组说明标签

               

   
密码表单
   密码:


   确认密码:
  


6、button按钮
type属性：
submit：提交表单，默认
reset：重置表单，不是清空，而是回到初始化的状态，相当于刷新。
button：一般性按钮

  提交 
  重置 
  按钮

源码：

    
    
    


    


    表单元素
    


    

        

            
用户名表单
          
              用户名：
          
          
              电子邮件：
          
        


        

            
密码表单
            密码:


            确认密码:
        

        提交 
        重置 
        按钮