📜  表单标签的元素

📅  最后修改于: 2021-11-10 06:02:51             🧑  作者: Mango

表单用于从用户那里获取输入。它可用于注册、登录网站或在网站上创建您的个人资料等。可以从表单中收集的信息可以有多种类型。表单数据由后端处理。我们可以使用各种表单元素,如文本字段、文本区域、下拉列表、选择、复选框、单选等。

我们用来创建这个表单的标签是

标签,它具有我们必须遵循的语法:


 // various the form elements

以下 HTML 元素可以与表单元素一起使用:

1. input:这是最常用的表单元素之一。它以多种方式使用,具体取决于我们要定义的字段类型。

例子:

HTML



  

    input element   

  
            


HTML



  

    label element   

  
            


HTML



  
    

      select what would you like to do     

       


HTML



  

    what is your favourite car   

  
       


HTML



  

    which car do you have?   

  
       


HTML


  
  

    textarea   

  
       


HTML



  

button

  


HTML



  

    FIELDSET AND LEGEND ELEMENTS   

  
    
               the personal informations                          
  


HTML



  

    DATALIST ELEMENT   

  
                   


输出:

2.标签:用于为我们定义的字段定义标签。当用户试图专注于输入元素时,它很有用。因此,我们使用的标签元素与输入要素,作为“对”的标签元素的属性等于输入元素的“id”属性。

例子:

HTML




  

    label element   

  
            

输出:

在这里,我们可以看到标签如何定义我们使用input元素创建的文本字段。

3. select:用于创建下拉列表。这允许用户根据需要选择尽可能多的选项。当我们使用此元素创建下拉列表时,可以根据情况更改属性的行为。

这些属性是:

  1. multiple:该属性用于让用户选择一个或多个选项。根据此特定属性,我们可以将其与单选按钮(允许用户一次选择一个选项)和复选框(允许用户选择多个选项)进行比较。
  2. size:此属性用于显示列表中存在的值的数量。例如,在一个列表中,有 5 个以上的选项可用。因此,如果我们想让选项可见,那么我们可以使用 size 属性。

示例 1:使用没有属性的 select 元素

HTML




  
    

      select what would you like to do     

       

输出:

示例 2:使用具有多个属性的 select 元素

HTML




  

    what is your favourite car   

  
       

输出:

示例 3:在 select 元素中使用 size 属性

HTML




  

    which car do you have?   

  
       

输出:

4. textarea:用于创建多行文本字段。这主要用于表单,收集评论和评论。文本区域的大小可以由 cols 和 rows 等属性指定。所以cols属性用于指定宽度,row属性用于指定文本区域的行数。

例子:

HTML



  
  

    textarea   

  
       

输出:

5. 按钮:用于创建可点击的按钮。它有一个属性,即“类型”属性。此属性用于指定将根据情况在页面上使用的按钮。不同的浏览器可能具有按钮的默认样式。

例子:

HTML




  

button

  

输出:

6.fieldsetlegend:这些元素一般是一起使用的。用例如下:

  • fieldset:用于对表单中相互关联的数据进行分组。
  • 图例:用于定义字段集元素的标题。

例子:

HTML




  

    FIELDSET AND LEGEND ELEMENTS   

  
    
               the personal informations                          
  

输出:

7. datalist:用于在列表中创建一些预定义的选项。当用户输入数据时,用户将显示这些可以选择的选项。 input 元素中的 list 属性必须引用 datalist 元素的 id。

HTML




  

    DATALIST ELEMENT   

  
                   

输出:

支持的浏览器:

  • 谷歌浏览器 6.0 及以上
  • Internet Explorer 9.0 及以上
  • Mozilla 4.0 及以上
  • Opera 11.1 及以上
  • Safari 5.0 及以上