HTML

HTML Forms

An HTML form passes data through a server, either creating a database or sending the form to your email. An HTML form can contain many different elements like text fields, radio-buttons, checkboxes, password field, and more. The form can also allow to select from a list, have a textarea, legend, and label elements. The <form> tag is used to create an HTML form.

Text Fields

First name:
Last name:

The <input type=”text”> tag defines a one-line text field that a user can input text into.

<form>
First name:<input type=“text” name=“firstname”><br>
Last name:<input type=“text” name=“lastname”>
</form>

Password Field

Password:

The <input type=”password”> tag defines a password field.

<form>
Password:<input type=“password” name=“pwd”>
</form>

Radio-Buttons

Male
Female

The <input type=”radio”> tag defines a radio-button. Radio-buttons allow the user to select only ONE option.

<form>
<input type=“radio” name=“gender” value=“male”>Male<br>
<input type=“radio” name=“gender” value=“female”>Female
</form>

Checkboxes

I have a dog
I have a cat

The <input type=”checkbox”> tag defines a checkbox. Checkboxes allows the user to select multiple options.

<form>
<input type=“checkbox” name=“pet” value=“Dog”>I have a dog<br>
<input type=“checkbox” name=“vehicle” value=“Cat”>I have a cat
</form>

Textarea

The <input type=”textarea”> tag defines a textarea box. This allows the user to have a larger area to input text. The rows (rows) and comumns (cols) are adujstable to change the size of the text box.

<html><body>

<textarea rows=“10” cols=“30”>The dog was chasing the cat.</textarea>

</body></html>

Submit Button

Username:

The <input type=”submit”> tag defines a submit button. A submit button is used to send the data to a server. The data is sent to the page or email specified in the form’s action attribute.

<form name=“input” action=“www.yalabbassi.com/thankyou.html“ method=“get”>
Username: <input type=“text” name=“user”>
<input type=“submit” value=“Submit”>
</form>

To have the form send the data to an email, change the form action to MAILTO:

Send e-mail to someone@example.com:

Name:

E-mail:

Comment:

<html><body>

<h3>Send e-mail to someone@example.com</h3>

<form action=“MAILTO:someone@example.com“ method=“post” enctype=“text/plain”>
Name:<br> <input type=“text” name=“name” value=“your name”><br>
E-mail:<br> <input type=“text” name=“mail” value=“your email”><br>
Comment:<br> <input type=“text” name=“comment” value=“your comment” size=“50”><br><br>
<input type=“submit” value=“Send”> <input type=“reset” value=“Reset”></form>

</body></html>