DEV Community

Anandhi P
Anandhi P

Posted on

HTML FORM

HTML Form

An HTML form is a section of a web page that is used to collect information from users. It allows users to enter data, such as their name, email address, password, phone number, comments, or feedback, and submit it to a server for processing.

Forms are an important part of websites because they help users interact with web applications. HTML forms are commonly used for logging in, registering a new account, searching for information, submitting feedback, making online bookings, and filling out application forms.

Common Form Elements

  • Text Box
  • Password Field
  • Email Field
  • Radio Button
  • Checkbox
  • Drop-down List
  • Text Area
  • File Upload
  • Submit Button
  • Reset Button

Uses of HTML Forms

  • Collect user information
  • Create login and registration pages
  • Submit feedback or comments
  • Contact website owners
  • Apply for jobs or courses
  • Place online orders
  • Search for information on websites

Simple Definition

An HTML form is used to collect user input and send the data to a server for procesing.
<!doctype html>




Form



College Addmission form




User Information
Name
required
name="user-name"
id="student-name"
placeholder="Enter your name"
type="text"
/>
Email
name="email"
type="email"
id="studen-email"
placeholder="Enter your email"
/>
Age
type="number"
max="10"
name="age"
id="age"
placeholder="enter age"
/>
Phone Number
readonly
value="783272"
name="phone"
type="tel"
id="student-phone"
placeholder="Enter your phone number"
maxlength="5"
/>
DOB

Address

Gender 
      <input name="gender" id="male" value="Male" type="radio" />
      <label for="Male">Male</label>

      <input value="Female" id="female" type="radio" name="gender" />
      <label for="female">Female</label>

      <input name="gender" id="others" value="Others" type="radio" />
      <label for="others">Others</label>
    </fieldset>
    <fieldset>
      <legend>Course Details</legend>
      <label for="Courses">Courses</label>
      <select name="courses" id="courses">
        <option value="">Select</option>
        <option value="Python fullstack">Python Fullstack</option>
        <option value="JAVA fullstack">Java fullstack</option>
        <option value="AIDS">AIDS</option>
        <option value="Ui/Ux">Ui/Ux</option>
        <option value="Digital Marketing">Digital Marketing</option>
      </select>
      <label for="feed-back">Feedback</label>
      <textarea name="feed-back" id="feed-back"></textarea>
      <label for="lang">Preferred Language</label>
      <input name="lang" type="checkbox" id="english" value="English" />
      <label for="english">English</label>
      <input
        disabled
        name="lang"
        type="checkbox"
        id="tamil"
        value="Tamil"
      />
      <label for="tamil">Tamil</label>
      <input name="lang" type="checkbox" id="hindi" value="Hindi" />
      <label for="hindi">Hindi</label>
    </fieldset>
    <input type="submit" value="submit" />
  </form>
</div>

Top comments (0)