Skip to main content

Form Creation (<form>)

Forms are the primary way users interact with websites and web applications by sending information to the server.

The fundamental tag for creating a form is <form>. Like <html> or <body>, <form> acts as a container that groups all the data input elements (text fields, buttons, dropdown menus) that users fill out and then submit.

Main Attributes of <form>​

Two fundamental attributes dictate how a form sends its data.

1. action​

The action attribute specifies the destination where the form data will be sent once the user presses the "Submit" button.

  • It can be an absolute URL (i.e., a full web address like https://www.mysite.com/process_login.php)
  • Or a relative URL (a local file on your server like /process-login)
<form action="/process-form">
    <!-- Input fields go here -->
</form>

2. method​

The method attribute indicates which HTTP method the browser will use to send the data from this form to the server specified in action. The two most common methods are GET and POST.

  • GET: (The default if not specified). Appends form data to the URL (like .../search?query=HTML) visibly. It's ideal for searches or non-sensitive data, but is not secure for passwords.
  • POST: Sends data hidden from the user, in the HTTP request body. It is used almost exclusively when sending confidential information and whenever dealing with large amounts of data.
<form action="/login" method="POST">
    <!-- Input fields go here -->
</form>

Form Elements​

A form itself is just the container. The fields that compose it are created inside it, generally using the <label>, <input>, and <button> tags.

Example of a basic contact form:

<form action="/send-message" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="user_name">
  
  <label for="message">Message:</label>
  <textarea id="message" name="message_text"></textarea>

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