How To Create And Design Forms

Forms is a very important part of any website its using purpose is that collect data from visitors in the shape of feedback, comments, etc. This is mostly used in these platforms like online shopping websites, for order any product, for online registrations, for signing up for emails, for contact site admin via contact form, and for many others related to these platforms. In HTML we can easily create and design any online html forms but HTML is static language so which form we will create then for its validation we need online or offline server or database for validation we can also use JavaScript and PHP to sending all data but in this section you will learn creating and designing. In this section I will practically create this using HTML and will design it.

online html forms

Some Properties And Major Things:

Text field (where user can insert their own details like, name, city, address, email etc)

Check Boxes (where user can select their age, education, passion, interest etc)

Radio Button (user can select age or gender like male or female)

List Boxes (user can select their country by using list boxes)

Text Area (user can type comments and give suggestions)

File (uploading files like pictures, documents etc)

Button (by click the button user can send all these information to the server)

Example And Source Code?

<html>
<head>
<title> Form Example </title>
</head>
<body>
<form>
<table border = “3” align = “center” bgcolor = “orange”>
<tr>
<td>Enter Name</td>
<td><input type = “text”></td>
</tr>
<tr>
<td>Enter Password</td>
<td><input type = “password”></td>
</tr>
<tr>
<td>Skills:</td>
<td>CSS<input type = “checkbox”>
JavaScript<input type = “checkbox”>
jQuery<input type = “checkbox”>
Php<input type = “checkbox”></td>
</tr>
<tr>
<td>Upload Your Image</td>
<td><input type = “file”></td>
</tr>
<tr>
<td>Gender:</td>
<td>Male<input type = “radio”>Female<input type = “radio”></td>
</tr>
<tr>
<td>Select Country:</td>
<td><select>
<option>China</option>
<option>England</option>
<option>Australia</option>
<option>America</option>
<option>Pakistan</option>
<option>South Africa</option>
</select></td>
</tr>
<tr>
<td>Comments</td>
<td><textarea name = “comments” rows = “4” cols = “35”>
Enter Your Comments
</textarea></td>
</tr>
<tr>
<td align = “Center” colspan = “7”><input type = “submit” value = “Send Us”></td>
</tr>
</table>
</form>
</body>
</html>

Out Put On Web Browser:

html forms

Video Tutorial:

In this video tutorial you will learn that how to create form in HTML I have created it for my viewers and after watching this video you can create any type of forms yourself using HTML and also perform designing.

Note:
For more details send us email.

Ahsan Ali

Mohammad Ahsan Ali is a Web Designer, Web Developer and Online Instructor working as online Computer Instructor since last 1 year. My Mission is that conveys knowledge to everyone and want to make everyone successful in their life.

Leave a Reply

Your email address will not be published. Required fields are marked *