HTML tags for forms along with Example

Short Answer

HTML forms let users send data to a web server. They are made with the <form> tag. Inside it, you use different tags for input like <input>, <textarea>, and <select>. For example, a form might ask for your name and email. The <input> tag can change based on what you need. It can be for text, a password, or a date. <textarea> is for longer text, like comments. <select> lets you pick from options. To submit the form, you use a <button> or an <input> tag set to submit.

Here’s a simple example:

<form action="/send-form" method="POST">
  Name: <input type="text" name="name">
  Email: <input type="email" name="email">
  <input type="submit" value="Submit">
</form>

This form sends your name and email to a server when you click “Submit.”

Detailed Answer

HTML forms are crucial for interactive websites. They gather user input and send it to a server. To start, we use the <form> tag. This tag wraps around all parts of the form. It needs action and method attributes. action tells where to send the data. method decides how to send it, like GET or POST.

Inside a form, <input> tags are versatile. They collect data in various forms. For text, use <input type="text">. For passwords, <input type="password"> hides what you type. Dates, emails, and numbers have their types too. Each <input> should have a name attribute. This way, the server knows each piece of data’s name.

For longer messages, <textarea> comes in handy. It lets users type more text. Unlike <input>, it’s resizable and doesn’t need a type. It still needs a name, though.

When you want choices, <select> is your go-to. It creates a dropdown menu. Inside, <option> tags define the available choices. Each option can have a value. This value is what gets sent when you submit the form.

To send the form, you need a submit button. <input type="submit"> or <button type="submit"> can do this. They can both have text like “Submit” or “Send”. This button tells the browser to send the form’s data to the server.

Example:

<form action="/submit-data" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="username">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="useremail">
  
  <label for="message">Message:</label>
  <textarea id="message" name="usermessage"></textarea>
  
  <label for="country">Country:</label>
  <select id="country" name="usercountry">
    <option value="usa">USA</option>
    <option value="canada">Canada</option> 
  </select>
  
  <input type="submit" value="Submit">
</form>

This example includes text, email, textarea, and select inputs. It’s clear and easy to use. When someone fills it out and hits “Submit,” the data goes to the server. This way, HTML forms bridge users and servers. They make websites interactive and useful.