HTML Form

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>

Reminder

Hi Developers, we almost covered 99.5% of HTML Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in HTML.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Meet the Author