HTML Form

Last Updated:

HTML Form

The HTML form is a collection of <input> elements that allow a user to enter data that is sent to a server for processing.

Simple Form

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <form method="get" action="/login.php"> Email Address:<br> <input type="text" name="email"><br> Password:<br> <input type="password" name="pass"> <input type="submit"> </form> </body> </html>

Form with Radio buttons

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <form method="get" action="/gender.php"> <input type="radio" name="gender" value="male"> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other <input type="submit"> </form> </body> </html>

Form with Label

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <form method="get" action="/gender.php"> <label for="male">Male</label> <input type="radio" name="gender" value="male" id="male"><br> <label for="female">Female</label> <input type="radio" name="gender" value="female" id="female"><br> <label for="other">Other</label> <input type="radio" name="gender" value="other" id="other"> <input type="submit"> </form> </body> </html>

Form with Slidebar

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <h2>How Much You Love Wikimass.com</h2> <input type="range" id="point" value="90" onchange="myFunction()"> <p>I love <span id="myID1">98</span>%</p> <script> function myFunction(){ var x = document.getElementById("point").value; document.getElementById("myID1").innerHTML = x; } </script> </body> </html>

Form with Fieldset

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <form method="get" action="/login.php"> <fieldset> <legend>Login Form:</legend> Email Address: <input type="text" name="email"><br><br> Password: <input type="text" name="pass"><br> </fieldset> <input type="submit"> </form> </body> </html>

Share this Page

Meet the Author