如何创建 HTML 表单

2025 年 3 月 25 日 | 阅读 5 分钟

我们需要在 HTML 文档中多次创建登录和注册表单，以便在网页上显示表单。因此，本页面将介绍如何使用各种标签在 HTML 文档中创建这两个表单。

登录表单

如果我们想在 HTML 文档中创建一个登录表单并在网页上显示该表单，那么我们需要遵循以下步骤或使用以下标签。使用这些标签或步骤，我们可以轻松地创建表单。

步骤 1：首先，我们必须在任何文本编辑器中键入 HTML 代码，或者在要创建登录表单的文本编辑器中打开现有的 HTML 文件。

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Create a Login form 
</Title>
</Head>
<Body> 
The following tags are used in this Html code for creating the Login form:
</Body> 
</Html>

步骤 2：现在，我们将光标置于要在 HTML 文档中创建表单的位置，即在 HTML 文档的 <body> 标签的开始和结束之间。然后，我们需要键入名为 <form> 的标签。这是用于创建 HTML 表单的第一个标签。

<Body> 
The following tags are used in this Html code for creating the Login form:
<form>
    
    
</form>
</Body> 

步骤 3：现在，我们必须使用 <label> 标签，它为元素定义了名称。因此，我们需要键入第二个标签来显示 **用户 ID**。键入名称后，我们需要关闭 </label> 标签。

步骤 4：现在，我们必须使用 <input> 标签，它允许用户在框中插入字符。因此，我们需要使用其属性键入此标签以插入用户 ID。由于 input 标签是自闭合标签，因此无需关闭它。

步骤 5：再次，我们必须键入 <label> 标签来显示密码标签。然后，我们需要使用 <input> 标签键入密码，该标签在以下块中显示。

<label>Password:</label> 
<input type="password">  

步骤 6：然后，我们必须在 **type** 属性中给出 **submit** 值以提交表单。

步骤 6：最后，我们必须保存 HTML 文件，然后运行该文件，然后我们将在浏览器中的网页上看到登录表单。

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Create a Login form 
</Title>
</Head>
<Body> 
The following tags are used in this Html code for creating the Login form:
<form>
<label>User Id: </label> <br>
<input type="text"> <br> <br>
<label>Password:</label> <br>
<input type="password">  <br> <br>
<input type="submit" value="Submit">
</form>
</Body> 
</Html>

上述 HTML 代码的输出显示在以下屏幕截图中

注册表单

如果我们想在 HTML 文档中创建一个注册表单，那么我们需要遵循以下步骤或使用以下标签。使用这些标签或步骤，我们可以轻松地创建表单。

步骤 1：首先，我们必须在任何文本编辑器中键入 HTML 代码，或者在要创建注册表单的文本编辑器中打开现有的 HTML 文件。

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Create a Registration form 
</Title>
</Head>
<Body> 
The following tags are used in this Html code for creating the Registration form:
</Body> 
</Html>

步骤 2：现在，我们将光标置于要在 HTML 文档中创建表单的位置，即在 HTML 文档的 <body> 标签的开始和结束之间。

然后，我们需要键入名为 **<form>** 的标签。这是用于创建 HTML 表单的第一个标签。

步骤 3：标签：现在，我们必须定义标签，它用于表示创建该元素的名称。

步骤 4：文本和密码字段：我们还可以使用 input 标签和不同的 **type** 属性值轻松创建文本和密码字段。

步骤 5：单选按钮：我们还可以创建单选按钮，用于从给定列表中选择一个选项。要创建单选按钮，我们必须在 input 标签的 **type** 属性中给出 **"radio"** 值。

步骤 6：复选框：我们还可以创建复选框，用于从给定列表中选择一个或多个选项。要在表单中创建复选框，我们必须在 **type** 属性中给出 **"checkbox"** 值。

<label>
Hobbies:
</label>  
<br>  
<input type="checkbox" name="Programming"> Programming <br>  
<input type="checkbox" name="Cricket"> Cricket <br>  
<input type="checkbox" name="Football"> Football  <br> 
<input type="checkbox" name="reading Novel"> Reading Novel

步骤 7：下拉菜单：如果我们想创建下拉菜单来选择一个选项。因此，要创建它，我们必须在 select 元素内键入 option 元素。

<label>
Course :
</label>
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>

步骤 8：文本区域：如果我们想在框中输入一行或多行文本，那么我们必须在 <form> 标签中使用 <textarea> 标签。

<textarea cols="80" rows="5" value="address">
</textarea>

步骤 9：文件选择框：如果我们想将本地文件与表单数据一起附加，那么我们必须在 <input> 标签的 **"type"** 属性中给出 **file** 值。

步骤 10：提交按钮：此按钮在表单结束时，在 </form> 标签关闭之前使用。它用于将表单提交到数据库。

步骤 11：重置按钮：此按钮用于将所有表单控件重置为其默认值。要创建重置按钮，我们必须在 <input> 标签的 **type** 属性中给出 **reset** 值。

步骤 12：最后，在所有标签之后，我们必须关闭 </form> 标签，然后保存 HTML 文件，然后在浏览器中运行该文件。

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Create a Registration form 
</Title>
</Head>
<Body> 
The following tags are used in this Html code for creating the Registration form:
<br>  
<form>  
<label> Firstname </label>         
<input type="text" name="firstname" size="15"/> <br> <br> 
<label> Lastname: </label>         
<input type="text" name="lastname" size="15"/> <br> <br>  
<label>   
Course :  
</label>   
<select>  
<option value="Course">Course</option>  
<option value="BCA">BCA</option>  
<option value="BBA">BBA</option>  
<option value="B.Tech">B.Tech</option>  
<option value="MBA">MBA</option>  
<option value="MCA">MCA</option>  
<option value="M.Tech">M.Tech</option>  
</select>  
<br>  
<br>  
<label>   
Gender :  
</label><br>  
<input type="radio" name="gender"/> Male <br>  
<input type="radio" name="gender"/> Female <br>  
<input type="radio" name="gender"/> Other  
<br>  
<br>  
<label>
Hobbies:
</label>  
<br>  
<input type="checkbox" name="Programming"> Programming <br>  
<input type="checkbox" name="Cricket"> Cricket <br>  
<input type="checkbox" name="Football"> Football  <br> 
<input type="checkbox" name="reading Novel"> Reading Novel  <br> 
<br>  
<br> 
<label>   
Phone :  
</label>    
<input type="text" name="phone" size="10"> <br> <br>  
Address  
<br>  
<textarea cols="80" rows="5" value="address">  
</textarea>  
<br> <br>  
Email:  
<input type="email" id="email" name="email"> <br>    
<br> <br>  
Password:  
<input type="Password" id="pass" name="pass"> <br>   
<br> <br>  
<input type="submit" value="Submit">  
<input type="reset" value="Reset">
</form>  
</Body> 
</Html>

上述 HTML 代码的输出显示在以下屏幕截图中

下一个主题如何在 HTML 中创建列表

如何创建 HTML 表单

登录表单

注册表单

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

如何创建 HTML 表单

登录表单

注册表单

相关帖子

HTML 解释器

HTML 调查

HTML Target 属性

HTML Datalist

HTML MDN

如何在 HTML 中包含图片

HTML 中的 Colspan 是什么意思

HTML 输入框

HTML 的表情符号代码

HTML 秒表

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器