web前端 --- 表单标签

表单标签 --- 行内标签

描述：一个完整的表单标签通常由表单域、表单控件（表单元素）和提示信息三部分构成

作用：数据交互（C/S）

（1）表单域 ---

标签用于定义表单域，以实现用户信息的收集和传递，将范围内的表单元素提交给服务器

（2）表单元素

表单元素分为三类：input输入表单元素、select下拉表单元素、textarea文本域元素

【1】input输入表单元素

• 重要属性作用

<1> 文本框：（text）

用户名称：

<2> 密码框：（password）

用户密码： 

<3> 单选按钮：（radio）

用户性别：
男
女

<4> 复选框：（checkbox）

用户爱好：
LOL
rap
jump
basketball

<5> 提交按钮：（submit）

<6> 重置按钮：（reset）

<7> 邮箱：（email）

用户邮箱：

<8> 文件域：（file）

用户头像：

• 常用属性

属性值	描述
button	定义可点击按钮
checkbox	定义复选框
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的输入按钮
password	定义密码字段。该字段中的字符显示被星号代替
radio	定义单选按钮
reset	定义重置按钮。重置按钮会清除表单中的所有数据
submit	定义提交按钮。提交按钮将表单数据发送到服务器
text	定义单行输入字段，在其中输入文本，默认宽度为20个字符

• 代码演示

    
    


    
用户注册
    
        
        

            用户名称：
        

        

            用户密码： 
            
            
        

        

            用户性别：
            男
            女
            
        

        

            用户爱好：
            LOL
            rap
            jump
            basketball

        

        

            用户邮箱：
            
        

        

            用户博客：
            
        

        

            
            
        
    

【2】select下拉表单元素

页面中有多个选项需用户选择，并且为了保证格式规范和节约空间，用此标签控件定义下拉列表

• 中至少包含一对
  在中定义selected时，当前项即为默认选中

  用户地址：
  

  陕西 广东 福建 广西

  

  【3】textarea文本域元素

  用户输入内容较多，用表单元素标签代替文本框标签。表单元素标签</strong></span><span style="color:#1a439c;"><strong>是用于定义多行文本输入控件</strong></span></p> </blockquote> <pre><code class="language-html">用户建议或意见： <textarea name="" id="" cols="30" rows="10">

  

  （3）代码演示

  
  
  
      
      
      
      
  
  
      
  用户注册
      
  
          
  
              用户名称： 
              
  
              用户名称：
              
  
              用户名称：
              
  
              用户名称：
              
              
          
  
          
  
              用户密码： 
              
          
  
          
  
              用户性别：
              男
              女
              
              
          
  
          
  
              用户爱好：
              LOL
              rap
              jump
              basketball
  
          
  
          
  
              用户邮箱：
              
          
  
          
  
              用户博客：
              
          
  
          
  
              用户头像：
              
              
              
          
  
          
  
              出生日期:
                
  
                
  
               
          
  
          
  
               
              用户年龄：
              
          
  
          
  
              
              
              提交
              
  
              
  
          
          
          
  
          
           
          
  
          
  
          用户地址：
          
              陕西
              广东
              福建
              广西
          
          
  
          
  
              用户建议或意见：