HTML Form
You are Here:
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.
