Skip to main content
Practice

Form Tag

The form is used for collecting information on a web page and sending the collected information to the server.

For example, you can use a form to sign up a user by collecting their name, email address, and password and then sending this data to the server.

A web page form is similar to filling out an exam paper. In an exam, you write answers in the blank spaces or select one of the given options.

A web page form works on a similar principle. Users can enter text or choose one option among many.


Basic Form Structure
<form action="" method="">
  <!-- Various elements for user input go here -->
  <input type="text" name="username" placeholder="Enter your name" />
</form>

  • action: Specifies the URL of the server where the form data will be sent.

  • method: Determines how to send the form data to the server. Common methods are "GET" and "POST". "GET" sends the data appended to the URL, while "POST" sends the data in a hidden manner.


Input Elements​

Inside a form you can have various input elements like text boxes, radio buttons, checkboxes, etc.

It's similar to arranging different types of questions (multiple choice, short answer) on an exam paper.


Text Input​

You can create a text input field using the <input> tag. It's similar to addressing short-answer questions on an exam paper.

Text Input Field
<input type="text" name="username" placeholder="Enter your name" />

  • type: Specifies the type of input field; "text" indicates a regular text field.

  • name: The key used to send the data to the server, similar to the question number on an answer sheet.

  • placeholder: The text that appears in the input field when nothing is entered, guiding the user about what to input.


Button​

You can create a form submission button using the <button> tag.

Submit Data with Button
<button type="submit">Submit</button>

Checkbox and Radio Button​

A checkbox is created using <input type="checkbox"> and a radio button is created using <input type="radio">.

Checkboxes are similar to "select all that apply" questions on an exam, allowing multiple responses. Radio buttons are used for "select only one" questions, allowing only one choice.

Checkbox and Radio Button
<input type="checkbox" name="hobby" value="reading" /> Reading
<input type="radio" name="gender" value="male" /> Male

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.