Design a Contact Form using HTML5 Element
×
Home Courses Community Support
Design a Contact Form using HTML5 Element

In previous module have learned about basics of web form and <input> tag. Here we will create same form with some HTML5 input types.

See below code-

<!DOCTYPE html>
<html>
<head>
	<style>
	.space{ margin-left:54px; margin-bottom:20px; }
	.space1{ margin-left:40px; margin-bottom:20px; }
	.msq{ margin-left:35px; }
	.btn{ margin-left:95px; margin-top:35px; }
	.error{ color:#FF0000; }
	</style>
</head>
<body>
<h2>Contact Us</h2>
<form action="process.php" method="post">
    <label>Name</label> <input  class="space" name="userName" type="text"><br>
    <label>Email</label> <input  class="space" name="userEmail" type="email" ><br>
    <label>Website</label> <input  class="space1" name="userEmail" type="url" ><br>
    <label>Message</label> <textarea  class="msq" rows="5" cols="40" name="userMsg"> </textarea><br>
    <input class="btn" type="submit" name="submit">
</form>
</body>
</html>


The above code will create a web form with enbuild validation. You don't require to use PHP code to apply validation. HTML5 allow you to work with simple validation using input type.

Email Type:
For email field we have use type email. It will check the email address and will show error if the email is not valid.

URL Type:
Likely email, URL will do the same work. It will check the entered URL and will display an error for invalid URL.

See below image-
 

← Preview

New Input Types

Next →

Adding New Element to HTML

NOTES

Our mission is to provide highly effective and quality education via innovative solutions. Geeksdemy look forward to bridge the gap between in-demand technology and academics in order to deliver innovative, easy, interesting and affordable learning across the Globe.

Courses

  • Python
  • Game Development with Unity 3D
  • Arduino
  • PCB & Circuit Designing
  • Robotics and Embedded C
  • 8051/8052 Embedded Systems
  • QuadCopter & UAV
  • MATLAB with Robotics
  • Raspberry Pi
Learn On the Go!
Get the Android App
Get the iOS App