HTML |设计形式

什么是 HTML 表单：
HTML 表单是一种使用交互式控件将用户信息存储在 Web 服务器上的文档。 HTML 表单包含不同类型的信息，例如用户名、密码、联系电话、电子邮件 ID 等。
HTML 表单中使用的元素是复选框、输入框、单选按钮、提交按钮等。使用这些元素将用户的信息提交到 Web 服务器上。
form标签用于创建 HTML 表单。

HTML 表单示例：

html

 

  Username:

  
  

  Email id:

  
  


  

 

输出 ：

HTML 表单中的输入元素：

输入元素是 HTML 表单中最常用的元素。可以创建各种用户输入字段，例如文本字段、复选框、密码字段、单选按钮、提交按钮等。 下面列出了最常见的输入元素：

1. HTML 表单中的文本字段：
   文本字段是允许用户输入文本的单行输入字段。文本字段输入控件是使用“input”元素创建的，其类型属性的值为“text”。

html

Example Of Text Field

    

        Email Id:

        
    

1. 输出 ：

2. HTML 表单中的密码字段：
   密码字段是一种文本字段，其中输入的文本使用星号或点进行屏蔽，以防止正在查看屏幕的其他人识别用户身份。密码字段输入控件是使用“input”元素创建的，其类型属性的值为“password”。

html

Example of Password Field
   

    

        Password:
        

        
    

1. 输出 ：

2. HTML 表单中的单选按钮：
   单选按钮用于让用户从预定义选项列表中准确选择一个选项。单选按钮输入控件是使用“input”元素创建的，该元素的 type 属性值为“radio”。

html

Example of Radio Buttons

    

        SELECT GENDER
        

        
        Male

        
        Female
    

1. 输出 ：

2. HTML 表单中的复选框：
   复选框用于让用户从一组预定义的选项中选择一个或多个选项。复选框输入控件是使用“input”元素创建的，其类型属性的值为“checkbox”。

html

Example of HTML Checkboxes

    

        SELECT SUBJECTS
        

        
        Maths
        
        Science
        
        English
    

1. 输出 ：

HTML 表单中的文件选择框：

文件选择框用于允许用户选择本地文件并将其作为附件发送到 Web 服务器。它类似于带有按钮的文本框，允许用户浏览文件。而不是浏览文件文件，也可以写文件的路径和名称。文件选择框是使用“input”元素创建的，其类型属性的值为“file”。

html

Example of a File Select Box
    
    

        Upload:
        
    

输出 ：

HTML 表单中的文本区域：

文本区域是一个多行文本输入控件，允许用户在多行中提供描述或文本。文本区域输入控件是使用“textarea”元素创建的。

html

Example of a Text Area Box

    

        Description:
        
    

输出 ：

在 HTML 表单中选择框：

选择框用于允许用户从选项下拉列表中选择一个或多个选项。选择框是使用“选择”和“选项”两个元素创建的。列表项在选择元素中定义。

html

Example of a Select Box

    

        Country:
        
            India
            Sri Lanka
            Australia
        
    

输出 ：

重置和提交按钮：

提交按钮允许用户将表单数据发送到 Web 服务器。重置按钮用于重置表单数据并使用默认值。

html

Example of a Submit And Reset Button

    

        Username:
        
        
        
    

输出 ：

HTML 表单中使用的属性

动作属性：
表单提交后要执行的动作由action属性决定。通常，表单数据在用户单击提交按钮后发送到 Web 服务器上的网页。
例子 ：

html

Example of a Submit And Reset Button

    

        Username:
        
        
        
    

If you click the submit button, the form data
would be sent to a page called test.php .

HTML 表单中的 Target 属性：
Target 属性用于指定提交的结果是在当前窗口、新选项卡还是在新框架中打开。使用的默认值是“self”，这会导致在同一窗口中提交表单。为了在新的浏览器选项卡中打开表单结果，该值应设置为“空白”。

html

 

  Username:

  
  

  Password:

  
  


  

 

After clicking on the submit button, the result 
will open in a new browser tab.

Html 形式的名称属性：
每个输入字段都需要 name 属性。如果输入字段中未指定 name 属性，则根本不会发送该字段的数据。

html

 

  Username:

  
  

  Password:

  
  


  

 

In the above code, after clicking the submit button, the form data will
be sent to a page called /test.php. The data sent would not include the
username input field data since the name attribute is omitted.

方法属性：

用于指定提交表单时用于发送数据的HTTP方法。HTTP方法有两种，即GET和POST。
GET 方法 –

html

 

  Username:

  
  

  Password:

  
  


  

 

In the GET method, after the submission of the form, the form values 
will be visible in the address bar of the new browser tab.

邮政方法 –

html

 

  Username:

  
  

  Password:

  
  


  

 

In the post method, after the submission of the form, the form values
will not be visible in the address bar of the new browser tab as it was
visible in the GET method.

支持的浏览器：

• 谷歌浏览器
• IE浏览器
• 火狐
• 歌剧
• 苹果浏览器

HTML 是网页的基础，用于通过构建网站和 Web 应用程序进行网页开发。您可以按照此 HTML 教程和 HTML 示例从头开始学习 HTML。