HTML Forms

HTML CODES & EXAMPLES

HTML Forms

Learn how to create professional HTML forms using text fields, email, password, radio buttons, checkboxes, dropdowns, file uploads, textareas, validation and submit buttons.

← HTML Tables Start Learning →

What is an HTML Form?

Collect information from users

HTML forms are used to collect information from website visitors. Forms can be used for login pages, registration, contact forms, admission forms, course enquiries, surveys and many other purposes.

The main container is the <form> element. Inside a form you can use different controls such as <input>, <textarea>, <select> and <button>.

Basic HTML Form

Create your first form

basic-form.html

<form>

  <label>Name:</label>

  <input
    type="text"
    name="name"
    placeholder="Enter your name"
  >

  <button type="submit">
    Submit
  </button>

</form>

Label

Describe form controls

The <label> element provides a description for a form control and improves usability and accessibility.

label.html

<label for="username">
  Username
</label>

<input
  type="text"
  id="username"
  name="username"
>

Text Input

Collect short text

text-input.html

<label for="fullname">
  Full Name
</label>

<input
  type="text"
  id="fullname"
  name="fullname"
  placeholder="Enter your full name"
>

Email Input

Collect an email address

email.html

<label for="email">
  Email Address
</label>

<input
  type="email"
  id="email"
  name="email"
  placeholder="name@example.com"
>

Password

Create a password field

password.html

<label for="password">
  Password
</label>

<input
  type="password"
  id="password"
  name="password"
  placeholder="Enter password"
>

Number Input

Accept numeric values

number.html

<label for="age">
  Age
</label>

<input
  type="number"
  id="age"
  name="age"
  min="1"
  max="100"
>

Date Input

Select a date

date.html

<label for="dob">
  Date of Birth
</label>

<input
  type="date"
  id="dob"
  name="dob"
>

Radio Buttons

Select one option

radio.html

<p>Select your mode:</p>

<label>
  <input
    type="radio"
    name="mode"
    value="online"
  >
  Online
</label>

<label>
  <input
    type="radio"
    name="mode"
    value="offline"
  >
  Offline
</label>

Checkbox

Select multiple options

checkbox.html

<p>Select your skills:</p>

<label>
  <input
    type="checkbox"
    name="skill"
    value="html"
  >
  HTML
</label>

<label>
  <input
    type="checkbox"
    name="skill"
    value="css"
  >
  CSS
</label>

<label>
  <input
    type="checkbox"
    name="skill"
    value="javascript"
  >
  JavaScript
</label>

Select / Dropdown

Choose from a list

select.html

<label for="course">
  Select Course
</label>

<select
  id="course"
  name="course"
>

  <option value="">
    Choose a course
  </option>

  <option value="cca">
    Certificate in Computer Application
  </option>

  <option value="dca">
    Diploma in Computer Application
  </option>

  <option value="adca">
    Advance Diploma in Computer Application
  </option>

</select>

Textarea

Collect longer messages

textarea.html

<label for="message">
  Message
</label>

<textarea
  id="message"
  name="message"
  rows="6"
  placeholder="Write your message..."
></textarea>

File Upload

Allow users to select a file

file-upload.html

<label for="document">
  Upload Document
</label>

<input
  type="file"
  id="document"
  name="document"
>

Required Fields

Make important fields mandatory

required.html

<label for="name">
  Full Name *
</label>

<input
  type="text"
  id="name"
  name="name"
  required
>

<label for="email">
  Email *
</label>

<input
  type="email"
  id="email"
  name="email"
  required
>

Form Validation

Use HTML attributes for basic validation

validation.html

<input
  type="text"
  name="username"
  minlength="3"
  maxlength="20"
  required
>

<input
  type="number"
  name="marks"
  min="0"
  max="100"
  required
>

<input
  type="email"
  name="email"
  required
>

Submit & Reset Buttons

Control form actions

buttons.html

<button type="submit">
  Submit Form
</button>

<button type="reset">
  Reset Form
</button>

Login Form

Practical example

<form>

  <h2>Student Login</h2>

  <label for="email">
    Email
  </label>

  <input
    type="email"
    id="email"
    name="email"
    required
  >

  <label for="password">
    Password
  </label>

  <input
    type="password"
    id="password"
    name="password"
    required
  >

  <button type="submit">
    Login
  </button>

</form>

Student Registration Form

Complete practical example

registration-form.html

<form>

  <h2>Student Registration</h2>

  <label>
    Full Name
  </label>

  <input
    type="text"
    name="name"
    required
  >


  <label>
    Email
  </label>

  <input
    type="email"
    name="email"
    required
  >


  <label>
    Mobile Number
  </label>

  <input
    type="tel"
    name="mobile"
    pattern="[0-9]{10}"
    required
  >


  <label>
    Select Course
  </label>

  <select name="course" required>

    <option value="">
      Select Course
    </option>

    <option value="cca">CCA</option>
    <option value="dca">DCA</option>
    <option value="adca">ADCA</option>

  </select>


  <button type="submit">
    Register
  </button>

</form>

Contact Form

Website enquiry form

contact-form.html

<form>

  <label>
    Name
  </label>

  <input
    type="text"
    name="name"
    placeholder="Your name"
    required
  >


  <label>
    Email
  </label>

  <input
    type="email"
    name="email"
    placeholder="Your email"
    required
  >


  <label>
    Subject
  </label>

  <input
    type="text"
    name="subject"
    placeholder="Subject"
  >


  <label>
    Message
  </label>

  <textarea
    name="message"
    rows="6"
    placeholder="Write your message..."
    required
  ></textarea>


  <button type="submit">
    Send Message
  </button>

</form>

Course Enquiry Form

Education website example

course-enquiry.html

<form>

  <h2>
    Course Enquiry
  </h2>


  <label>
    Student Name
  </label>

  <input
    type="text"
    name="student"
    required
  >


  <label>
    Mobile Number
  </label>

  <input
    type="tel"
    name="mobile"
    pattern="[0-9]{10}"
    required
  >


  <label>
    Select Course
  </label>

  <select name="course" required>

    <option value="">
      Select a course
    </option>

    <option>CCA</option>
    <option>DCA</option>
    <option>ADCA</option>
    <option>Tally Prime with GST</option>

  </select>


  <label>
    Message
  </label>

  <textarea
    name="message"
    rows="5"
  ></textarea>


  <button type="submit">
    Submit Enquiry
  </button>

</form>

Premium Responsive Form

Modern website form design

premium-form.html

<div class="form-card">

  <h2>
    Course Enquiry
  </h2>

  <p>
    Fill in the form and our team will contact you.
  </p>


  <form>

    <div class="form-grid">

      <div>

        <label>
          Full Name
        </label>

        <input
          type="text"
          placeholder="Enter your name"
          required
        >

      </div>


      <div>

        <label>
          Email Address
        </label>

        <input
          type="email"
          placeholder="Enter your email"
          required
        >

      </div>

    </div>


    <label>
      Select Course
    </label>

    <select required>

      <option value="">
        Choose a course
      </option>

      <option>
        Certificate in Computer Application
      </option>

      <option>
        Diploma in Computer Application
      </option>

      <option>
        Advance Diploma in Computer Application
      </option>

    </select>


    <label>
      Message
    </label>

    <textarea
      rows="5"
      placeholder="Write your enquiry..."
    ></textarea>


    <button type="submit">
      Submit Enquiry
    </button>

  </form>

</div>


<style>

.form-card{
  max-width:700px;
  padding:30px;
  background:#fff;
  border:1px solid #e3eaf2;
  border-radius:20px;
  box-shadow:0 15px 40px rgba(20,50,90,.08);
}

.form-card h2{
  margin:0 0 8px;
  color:#1769d5;
}

.form-card p{
  color:#66778b;
  line-height:1.6;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
}

.form-card label{
  display:block;
  margin:16px 0 7px;
  font-weight:bold;
  font-size:13px;
}

.form-card input,
.form-card select,
.form-card textarea{
  width:100%;
  padding:13px;
  border:1px solid #dce4ed;
  border-radius:9px;
  font:inherit;
  outline:none;
}

.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus{
  border-color:#1769d5;
}

.form-card button{
  width:100%;
  margin-top:20px;
  padding:13px;
  border:0;
  border-radius:9px;
  background:#1769d5;
  color:#fff;
  font-weight:bold;
  cursor:pointer;
}

@media(max-width:600px){

  .form-grid{
    grid-template-columns:1fr;
  }

}

</style>

Important Form Elements

Quick reference

<form>

Creates a form

<form>

<input>

Creates input controls

<label>

Describes a field

Creates multi-line input

Creates dropdown

Creates dropdown option

required

Makes field mandatory

required

placeholder

Shows hint text

placeholder=”Name”

minlength

Sets minimum characters

minlength=”3″

maxlength

Sets maximum characters

maxlength=”20″

Live HTML Form Example

Run and preview the complete form

LIVE PREVIEW

Practice Task

Test your HTML form skills

🎯 Create a Student Admission Form

Build a complete student admission form using HTML.

Add Full Name, Email and Mobile Number.
Add Date of Birth.
Add Gender using radio buttons.
Add multiple course options using a dropdown.
Add address using a textarea.
Add document upload.
Make important fields required.
Add Submit and Reset buttons.
Make the form responsive for mobile devices.

`;document.getElementById( "sncecFormsPreview" ).srcdoc = code;}/* ================================= AUTO RUN ================================= */document.addEventListener( "DOMContentLoaded", function(){sncecFormsRun();} );

SNCEC PORTAL