[九]HTML+CSS基础（表单）

表单

表单可以将用户填写的信息提交的服务器

• 如果希望表单中的数据会提交到服务器中，还必须给表单项指定一个name属性，name表示提交内容的名字

• 表单项：一个表单可以包含多个表单项

• 文本框
  
• 密码框
  
• 多选框 （和单选框同需要指定value。指定默认选中项checked='checked'）

football
volleyball
basketball

• 单选框 （单选按钮通过name属性进行分组，name属性相同的是同一组。像这种需要用户选择，不需要用户直接填写内容的表单项，还必须指定一个value属性，这样被选中的表单项的value值将会最终提交给服务器 。指定默认选中项checked='checked'）

男女

• 提交按钮 （value属性改变按钮的名称）

提交

• 重置按钮

 

重置

• 单纯的按钮

按钮

• 创建文本域（实际效果和文本框类似，只是可以输入多行数据。可用属性： – cols ：文本域的列数 – rows ：文本域的行数 ）

• 下拉列表 (name属性需要指定给select value需要指定给option。在options中指定默认选中项seclected='selected'。当给select添加一个multiple='multiple'，则下拉列表变成一个多选的下拉列表)

 
       北京 
       上海
       广州
 


           
                北京 
                上海
                广州
           
           
                北京 
                上海
                广州
           
       

optgroup.png

---

    
    
    


    
    

        
                 
        用户名：
        
        
    

１.png

下图地址栏发生了变化，是由上图提交按钮点击之后出现的：用户填写的信息会附在URL地址的后面以查询字符串的形式发送给服务器，其格式是 —— 属性名=属性值&属性名=属性值

地址栏.png

• label标签：专门用来选中表单中提示文字的(把鼠标放在有label标签的提示上和没有label的提示上，形状也是不一样的)

该标签可以指定一个for属性，该属性的值需要指定一个表单项的id值

用户名：     

• fieldset用来为表单项进行分组。legend用于指定每组的名字。 label标签用来为表单项定义描述文字。

        
用户信息
        用户名：     
      

      密码：

      男女

      
 

fieldset.png