HTML 申请表

2025年1月11日 | 阅读 8 分钟

在本文中，我们将了解 HTML 应用程序表单。

HTML表单

HTML 表单是网页上可见文档的一部分，允许用户填写详细信息并提交表单。

HTML 表单用于收集访问网站的用户的详细信息。

语法

<form>
	Form elements. . .
</form>

在上述语法中，<form> 是开始标签，</form> 是结束标签。表单元素位于表单的开始标签和结束标签之间。表单元素可以是 <input>、<label>、<select>、<textarea>、<button>、<fieldset>、<option> 等。

HTML 表单元素

下表列出了 HTML 表单元素及其描述

表单元素	描述
<input>	它定义了用户可以输入数据的输入字段。
<label>	它为各种元素指定一个标签。
<button>	它用于创建一个按钮。
<textarea>	它用于创建一个多行文本输入区域。
<legend>	它用于为 <fieldset> 标签指定标题。
<fieldset>	它用于将相互关联的元素分组。
<select>	它用于创建下拉列表。
<option>	它用于在选择列表中指定一个选项。
<optgroup>	它用于在 <select> 标签中将相关选项分组。
<datalist>	它用于为 <input> 标签定义预定义选项列表。
<output>	它用于显示一些计算的结果。

HTML 应用程序表单的演示

我们将通过以下演示学习如何创建 HTML 应用程序表单。

演示 1

我们将在以下演示中利用 HTML 构建一个简单的应用程序表单。

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Illustration of an application form</title> 
</head> 

<body> 
	<div class="main"> 
		<h1>APPLICATION FORM</h1> 
		<form action=""> 
			<label for="firstname">First Name:</label>
			<input type="text" id="first"
				name="firstname"
				placeholder="Enter the first name" required> <br> <br>

			<label for="lastname">Last Name:</label> 
			<input type="text" id="last"
				name="lastname"
				placeholder="Enter the last name" required> <br> <br>

			<label for="email">Email:</label> 
			<input type="email" id="email"
				name="email"
				placeholder="Enter the email" required> <br> <br>

			<label for="dob">Date of Birth:</label> 
			<input type="date"
				id="dob" name="dob"
				placeholder="Enter the DOB" required> <br> <br>

			<label for="pass">Password:</label> 
			<input type="pass" id="pass"
				name="pass"
				placeholder="Enter the password"
				pattern= 
				"^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])\S{8,}$" required				 
				title="Password must consist of at least one number, 
					one alphabet, one symbol and password must be at least 8 characters long"> <br> <br>

			<label for="repass">Re-type Password:</label> 
			<input type="password" id="repass"
				name="repass"
				placeholder="Re-enter the password" required> <br> <br>
			<span id="pass"></span> 

			<label for="contact">Contact:</label> 
			<input type="text" id="contact"
				name="contact"
				placeholder="Enter the contact number" required 
				maxlength="10"> <br> <br>

			<label for="gender">Gender:</label> 
			<select id="gender" name="gender" required> <br> <br>
				<option value="male">Male</option> 
				<option value="female">Female</option> 
				<option value="other">Other</option> 
			</select> <br> <br>

			<div> 
				<button type="submit"> 
				Submit 
				</button>
			</div>
		</form> 
	</div>
</body> 

</html>

输出

这是输出，我们可以在其中看到一个简单的应用程序表单。

演示 2

在此示例中，我们将构建一个应用程序表单，并借助 CSS 为表单添加样式。

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Application form with some style applied utilizing CSS</title>
    <style>
        body {
            background-color: bisque;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            flex-direction: column;
            min-height: 100vh; 
            line-height: 15px;
        } 

        .application { 
            background-color: white;
            text-align: center;
            padding: 9px 19px;
            border-radius: 15px;
            box-shadow: 0 0 18px rgba(18, 18, 18, 0.2);
            transition: transform 0.2s;
            width: 600px;
        } 

        h1 { 
            color: red; 
        } 

        label { 
            display: block;
            text-align: left;
            font-weight: bold;
            margin-top: 12px;
            margin-bottom: 5px;
            width: 100%;
            color: black;
        } 

        #pass { 
            color: red;
        } 

        input { 
            display: block;
            padding: 10px;
            width: 100%;
            margin-bottom: 15px;
            box-sizing: border-box;
            border-radius: 6px;
            border: 1px solid #ece7e7;
        } 

        select { 
            display: block; 
            width: 100%; 
            margin-bottom: 12px; 
            padding: 9px; 
            box-sizing: border-box; 
            border: 1px solid#ece7e7; 
            border-radius: 6px; 
        } 

        button {
            margin-top: 12px;
            margin-bottom: 12px;
            padding: 12px;
            background-color: red;
            color: white;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            width: 100%;
            font-size: 18px;
        } 

        .submit { 
            display: flex; 
            justify-content: center; 
            align-items: center; 
        }

    </style>
</head> 

<body> 
	<div class="application"> 
		<h1>APPLICATION FORM</h1> 
		<form action=""> 
			<label for="firstname">First Name:</label>
			<input type="text" id="first"
				name="firstname"
				placeholder="Enter your first name" required>

			<label for="lastname">Last Name:</label> 
			<input type="text" id="last"
				name="lastname"
				placeholder="Enter your last name" required>

			<label for="email">Email:</label> 
			<input type="email" id="email"
				name="email"
				placeholder="Enter your email" required>

			<label for="dob">Date of Birth:</label> 
			<input type="date"
				id="dob" name="dob"
				placeholder="Enter your DOB" required>

			<label for="pass">Password:</label> 
			<input type="pass" id="pass"
				name="pass"
				placeholder="Enter your password"
				pattern= 
				"^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])\S{8,}$" required				 
				title="Password must contain at least one number, 
					one alphabet, one symbol, and be at 
					least 8 characters long">

			<label for="repass">Re-type Password:</label> 
			<input type="password" id="repass"
				name="repass"
				placeholder="Re-enter your password" required>
			<span id="pass"></span> 

			<label for="contact">Contact:</label> 
			<input type="text" id="contact"
				name="contact"
				placeholder="Enter your contact number" required 
				maxlength="10">

			<label for="gender">Gender:</label> 
			<select id="gender" name="gender" required>
				<option value="male">Male</option> 
				<option value="female">Female</option> 
				<option value="other">Other</option> 
			</select>

			<div> 
				<button type="submit" class="submit">Submit</button>
			</div>
		</form> 
	</div>
</body> 

</html>

输出

在下面的结果中，我们可以看到一个时尚的应用程序表单。

演示 3

我们将在下面的演示中借助 HTML 和 CSS 构建一个求职申请表。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Job Application Form</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: rgb(204, 253, 248);
        }

        .container {
            max-width: 850px;
            margin: 0 auto;
        }

        .case {
            margin: 0 auto;
            max-width: 650px;
            padding: 18px;
            background-color: rgb(11, 210, 190);
            border-radius: 9px;
            box-shadow: 6px 5px 9px rgb(137, 203, 196);
            margin-top: 60px;
        }

        .form-case {
            display: grid;
            margin: 2px;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 18px;
        }
        .form-control {
            display: flex;
            flex-direction: column;
        }
        label {
            margin-bottom: 6px;
            font-size: 18px;
        }
        input, select, textarea {
            padding: 8px 12px;
            font-size: 15px;
            border-radius: 5px;
            border: 1px solid black;
        }
        input:focus {
            outline-color: rgb(67, 184, 210);
        }
        .submit {
            display: flex;
            justify-content: flex-end;
            margin-top: 20px;
        }
        button {
            background-color: rgb(12, 135, 122);
            border: transparent solid 5px;
            padding: 6px 10px;
            color: white;
            border-radius: 8px;
            transition: 0.2s ease-in;
        }
        button:hover {
            padding: 6px 15px;
            background-color: rgb(3, 104, 94);
            border: 2px solid white;
            color: white;
            transition: o.2s ease-out;
            cursor: pointer;

        }
        .textarea-control {
            grid-column: 1 / span 2;
        }
        .textarea-control textarea {
            width: 100%;
        }
        @media(max-width: 475px) {
            .textarea-control{
            grid-column: 1 / span 1;
        } 
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="case">
            <h1> Job Application Form</h1>
            <form action="">
                <div class="form-case">
                    <div class="form-control">
                        <label for="first-name">First Name:</label>
                        <input id="first-name" name="first-name" placeholder="Enter your first name">

                    </div>
                    <div class="form-control">
                        <label for="last-name">Last Name:</label>
                        <input id="last-name" name="last-name" placeholder="Enter your last name">

                    </div>
                    <div class="form-control">
                        <label for="email">Email:</label>
                        <input type="email" id="email" name="email" placeholder="Enter your email">

                    </div>
                    <div class="form-control">
                        <label for="job-role">Job Role:</label>
                        <select id="job-role" name="job-role">
                            <option value="">Select Your Job Role</option>
                            <option value="senior-business-analyst">Senior Business Analyst</option>
                            <option value="full-stack-developer">Full Stack Developer</option>
                            <option value="research-analyst">Research Analyst</option>
                            <option value="backend-developer">Backend Developer</option>
                            <option value="quality-assurance-inspector">Quality Assurance Inspector</option>
                            <option value="php-developer">PHP Developer</option>
                        </select>

                    </div>
                    <div class="textarea-control">
                        <label for="address">Address</label>
                        <textarea name="address" id="address" cols="50" row="4" placeholder="Enter your address"></textarea>

                    </div>
                    <div class="form-control">
                        <label for="city">City:</label>
                        <input id="city" name="city" placeholder="Enter your city name">

                    </div>
                    <div class="form-control">
                        <label for="pincode">Pincode:</label>
                        <input type="number" id="pincode" name="pincode" placeholder="Enter Pincode">

                    </div>
                    <div class="form-control">
                        <label for="date">Date:</label>
                        <input type="date" id="date" name="date">

                    </div>
                    <div class="form-control">
                        <label for="upload">Upload your CV:</label>
                        <input type="file" id="upload" name="upload">

                    </div>
                </div>
                <div class="submit">
                    <button type="submit">Apply Now</button>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

输出

我们可以看到一个借助 HTML 和 CSS 形成的求职申请表。

演示 4

我们将在下面的示例中借助 HTML 和 CSS 构建一个学生注册表。

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Student Registration Form</title>
  <style>
    body {
        color: white;
    }
    form {
        margin: auto;
        padding: 18px;
        width: min(850px, 75%);
        border: 1px solid white;
        border-radius: 15px;
        background-image: url('background.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

    }

    h2 {
        text-align: center;
        font-size: 30px;
        margin-bottom: 18px;
    }

    label {
        margin-bottom: 6px;
        display: block;
        font-weight: bold;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select,
    #dob {
        width: 100%;
        margin-bottom: 18px;
        padding: 12px;
        box-sizing: border-box;
        border: 1px solid rgb(45, 30, 96);
        border-radius: 6px;
        opacity: 0.6;
    }

    textarea {
        height: 90px;
        resize: vertical;
    }

    .checkbox {
      display: flex;
      align-items: flex-start;
      margin-right: 18px;
    }

    label {
      margin-right: 18px;
    }

    table {
      margin-bottom: 18px;
      width: 100%;
      border-collapse: collapse;
    }

    table th,
    table td {
      padding: 12px;
      border: 1px solid white;
      text-align: center;
      color: white;
      font-size: 20px;
    }

    .buttons {
        display: flex;
        justify-content: center;
    }

    .buttons button {
        margin-right: 10px;
        padding: 12px 18px;
        font-size: 18px;
        background-color: rgb(252, 252, 138);
        color: blue;
        font-weight: bold;
        width: 175px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
    }

    .buttons button:hover {
        background-color: yellow;
    }
  </style>
</head>

<body>
  <form>
    <h2>Student Registration Form</h2>

    <label for="first-name">First Name:</label>
    <input type="text" id="first-name" name="first-name" required>

    <label for="last-name">Last Name:</label>
    <input type="text" id="last-name" name="last-name" required>

    <label for="dob">Date of Birth:</label>
    <input type="date" id="dob" name="dob" required>

    <label for="email">Email ID:</label>
    <input type="email" id="email" name="email" required>

    <label for="mob">Mobile:</label>
    <input type="tel" id="mob" name="mob" required>

    <label for="gender">Gender:</label>
    <select id="gender" name="gender" required>
      <option value="">Select Gender</option>
      <option value="male">Male</option>
      <option value="female">Female</option>
      <option value="other">Other</option>
    </select>

    <label for="address">Address:</label>
    <textarea id="address" name="address" required></textarea>

    <label for="city">City:</label>
    <input type="text" id="city" name="city" required>

    <label for="pin-code">Pin Code:</label>
    <input type="text" id="pin-code" name="pin-code" required>

    <label for="state">State:</label>
    <input type="text" id="state" name="state" required>

    <label for="country">Country:</label>
    <input type="text" id="country" name="country" required>

    <label for="qualification">Qualification:</label>
    <table>
      <tr>
        <th></th>
        <th>Board</th>
        <th>Percentage</th>
        <th>Year of Passing</th>
      </tr>
      <tr>
        <td>10th</td>
        <td><input type="text" name="10th-board" required></td>
        <td><input type="text" name="10th-percentage" required></td>
        <td><input type="text" name="10th-year-of-passing" required></td>
      </tr>
      <tr>
        <td>12th</td>
        <td><input type="text" name="12th-board" required></td>
        <td><input type="text" name="12th-percentage" required></td>
        <td><input type="text" name="12th-year-of-passing" required></td>
      </tr>
      <tr>
        <td>Graduation</td>
        <td><input type="text" name="graduation-board" required></td>
        <td><input type="text" name="graduation-percentage" required></td>
        <td><input type="text" name="graduation-year-of-passing" required></td>
      </tr>
    </table>

    <div class="buttons">
      <button type="reset">Reset</button>
      <button type="submit">Submit</button>
    </div>
  </form>
</body>

</html>

输出

输出展示了一个使用 HTML 和 CSS 构建的学生注册表。

演示-5

我们将在下面的演示中借助 HTML 和 CSS 构建一个贷款申请表。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Loan Application Form</title>
    <style>
      body {
        background-color: rgb(250, 246, 238);
        color: rgb(175, 116, 8);
      }
      h1, legend {
        color: orange;
      }
      legend {
        font-size: 18px;
        font-weight: bold;
      }
      button {
        margin-top: 10px;
        width: 75px;
        height: 30px;
        background-color: orange;
        color: white;
        border: none;
        border-radius: 6px;
        font-weight: bold;
      }
    </style>
</head>
<body>
<form>
    <h1>Loan Application Form</h1>
    <fieldset>
      <legend>Basic Information:</legend>
      <label for="first-name">First Name:</label>
      <input type="text" name="first-name" /> <br> <br>
      <label for="last-name">Last Name:</label>
      <input type="text" name="last-name" /> <br> <br>
      <label for="email-id">Email ID:</label>
      <input type="text" name="email" /> <br> <br>
      <label for="contact-number">Contact Number:</label>
      <input type="text" name="contact-number" /> <br> <br>
      <label for="home-address">Home Address:</label>
      <input type="text" name="home-address" /> <br> <br>
    </fieldset>
    <fieldset>
      <legend>Work Information:</legend>
      <label for="current-occupation">Current Occupation:</label>
      <input type="text" name="current-occupation" /> <br> <br>
      <label for="company name">Employer Name:</label>
      <input type="text" name="company-name" /> <br> <br>
      <label for="company-location">Employer Address:</label>
      <input type="text" name="company-location" /> <br> <br>
    </fieldset>
    <fieldset>
      <legend>Loan Type & Amount:</legend>

      <label for="loan-type">Loan Type:</label>
      <input name="loan" list="type-of-loan"/>
        <datalist id="type-of-loan">
          <option value="Personal">
          <option value="Real Estate">
          <option value="Commercial">
          <option value="Mortgage">
        </datalist> <br> <br>
      <label for="loan-amount">Loan Amount:</label>
      <input type="text" name="loan-amount" />
    </fieldset>
    <fieldset>
      <legend>Length of Loan:</legend>
      <input type="radio" name="length-of-time" value="5">5
      <input type="radio" name="length-of-time" value="15">15
      <input type="radio" name="length-of-time" value="30">30
    </fieldset>
    <fieldset>
      <legend>Marital Status:</legend>
      <input type="checkbox" name="status" value="single">Single
      <input type="checkbox" name="status" value="married">Married
      <input type="checkbox" name="status" value="divorced">Divorced
    </fieldset>
    <fieldset>
      <legend>Special Considerations:</legend>
      <label for="down-payment">Down Payment:</label>
      <input type="text" name="down-payment" /> <br> <br>
    </fieldset>
    <fieldset>
      <legend>Co-Signer Details:</legend>
      <label for="name">Name of Co-Signer:</label>
      <input type="text" name="name-of-cosigner" />
      <label for="occupation">Co-Signer Occupation:</label>
      <input type="text" name="occupation" />
    </fieldset>
    <fieldset>
      <legend>Comments:</legend>
      <textarea name='comment' cols="60" rows="3"></textarea>
    </fieldset>
    <fieldset>
      <legend>Declaration:</legend>
      <input type="checkbox" name="declaration">I hereby declare that the information given by me in the application is true, complete and correct to the best of my knowledge.
    </fieldset>
  <button type="submit">Submit</button>
</form>

</body>
</html>

输出

在下面的输出中，我们可以看到一个贷款申请表。

结论

在本文中，我们掌握了 HTML 应用程序表单。我们可以借助 HTML 和 CSS 制作各种类型的应用程序表单，例如求职申请表、贷款申请表、学生注册表等。

我们已经了解了如何使用 HTML 构建应用程序表单，并学会了如何使用 CSS 为表单应用样式。

下一主题HTML 边框样式

HTML 申请表

HTML表单

语法

HTML 表单元素

HTML 应用程序表单的演示

演示 1

演示 2

演示 3

演示 4

演示-5

结论

联系信息

关注我们

教程

面试题

在线编译器

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 应用程序表单的演示

演示 1

演示 2

演示 3

演示 4

演示-5

结论

相关帖子

HTML 中的根元素

HTML 替换

HTML 按钮 disabled

如何在 HTML 中旋转图片

HTML 可访问性

HTML 问卷模板

HTML 计数器

如何在 HTML 中添加内边距

HTML 编号列表

如何在 HTML 中添加垂直线

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器