Skip to main content
Practice

<form> Tag

The <form> tag is a method for collecting user input on a webpage and can include various types of input fields (text, radio buttons, checkboxes, buttons, etc.).


Main Attributes​

  • action: Specifies the URL to send the data to when the form is submitted.

  • method: Specifies the method to send the form data to the server. Typically, "GET" or "POST" methods are used.

    • GET: Sends the form data by appending it to the URL. Commonly used for search queries or simple data transfers.

    • POST: Sends the form data in the HTTP body. Used for sending sensitive or large amounts of data.

  • enctype: Specifies how the form data should be encoded when submitted to the server. Typically, "multipart/form-data" is used for file uploads.

  • autocomplete: Specifies whether the browser should enable autocomplete for the form fields as the user types.


Example Usage​

Template Example
<form id="form">
  <input
    id="input-name"
    class="contact-input"
    type="text"
    name="name"
    placeholder="NAME"
  />
  <input
    id="input-email"
    class="contact-input"
    type="email"
    name="email"
    placeholder="EMAIL"
  />
  <textarea
    id="input-message"
    class="contact-textarea"
    name="message"
    placeholder="MESSAGE"
  ></textarea>
  <button id="send-button" class="border-highlight" type="submit">
    <span>SEND EMAIL</span>
  </button>
</form>

Submitting Data with POST Method
<form action="/submit" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" />

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" />

  <input type="submit" value="Submit" />
</form>

Features:​

  1. A <form> tag can contain various input elements (<input>, <textarea>, <select>, <button>, etc.).

  2. The form data is sent to the specified "action" URL when the user clicks the "submit" button.

  3. A <form> can also be submitted programmatically using JavaScript.

  4. To securely collect user input on a webpage, it is recommended to use secure protocols such as HTTPS.

Want to learn more?

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