الأحد، 1 فبراير 2015

How to create a simple form using HTML?

From is a necessary element in any website or blog. Mostly they are used to take user information for any of the purposes like logging into the user account, creating user account, allowing to subscribe malling list, allowing users to submit comments and allowing users to contact website admin, support or sales team.

Here I am going to describe "How to create a simple form using HTML" step by step with describing what is a form and what elements are used to create HTML form along with complete HTML code for a form.

A form is an area that contain form elements. You must set up a form before adding in run to the web page. To setup a form, you need to specify two important information Method and Action.

Method is a property tells the form how to transfer the data to the form processor. The value for method can be 'post' or 'get' In post method you are just posting information and method get means that you are just going to get another page. In almost all of the form post method is used.

Action property tells what action the form should take when the user presses the submit button. Action is the URL to which you are posting the information.

We have to use different HTML tags to create a form. The most commonly used HTML tags to create a form are listed below.


Different Tags for HTML Form


<INPUT> Tag: The most form tag is <INPUT> tag. The type of INPUT is specified with the TYPE attribute. This tag doesn't have its ending tag. The most commonly used INPUT types are listed below:

TEXT: It is used for plain type of text input. The attributes used in this type are NAME, VALUE, SIZE and MAXLENGTH.

Example: <INPUT TYPE="TEXT" NAME="UserName" VALUE="Username" SIZE=16 MAXLENGTH=15>


PASSWORD: It is used for password type of text input. The attributes used in this type are NAME, VALUE, SIZE and MAXLENGTH.

Example: <INPUT TYPE="PASSWORD" NAME="Password" VALUE="Password" SIZE=16 MAXLENGTH=15>


RADIO: It is used for single choice input system. The attributes used in this type are NAME, VALUE and CHECKED

Example: <INPUT TYPE="radio" NAME="sex" VALUE="M" CHECKED>


CHECKBOX: It is used for multiple choice input system. The attributes used in this type are NAME and VALUE.

Example: <INPUT TYPE="checkbox" NAME="MCQ" VALUE="M">


RESET: It is used to reset values entered in a form. Value is the attribute of RESET type of INPUT. 
Example: <INPUT TYPE="reset" VALUE="Clear Form">


SUBMIT: It is used to submit values entered in a form. Value is the attribute of SUBMIT type of INPUT.

Example: <INPUT TYPE="submit" VALUE="Submit">

<TEXTAREA> Tag: This tag is used to specify the area of the text. This tag makes a two dimensional text area, in which viewer can type from a short sentence to many paragraphs. This tag has its ending tag and it is mostly used to create comment form or contact form. The attributes in this tag are NAME, VALUE, COLS and ROWS.

Example: <TEXTAREA NAME="Details" COLS=30 ROWS=5></TEXTAREA>

<SELECT> Tag: This tag is used to create a menu that offers visitors a list of option to choose from. This tab has also its ending tag. The attributes in this tag are NAME, MULTIPLE and SIZE.

Example: <SELECT NAME="Menu" MULTIPLE SIZE=3><OPTION>.....</SELECT>

<OPTION> Tag: It is the mini tag of <SELECT> tag. This tag is used to define the options to choose from the drop-down list. SELECTED is the attribute of <OPTION> Tag.

Example: <SELECT NAME="Menu" MULTIPLE SIZE=3><OPTION SELECTED>Programming Guide<OPTION>MCQs</SELECT>

Here is a sample form to allow users to create user and subscribe for the topics they want along with complete HTML code and its output.

HTML Code to Create a Simple Form


<html>
<head><title>Subscription Form</title></head>
<body>
<h1 align=center>Subscription Form</h1>
<br/>
<FORM METHOD='POST' ACTION=mailto:siteforinfotech@gmail.com>
<DIV>First Name:<INPUT TYPE='text' NAME='fname' VALUE='Enter First Name' SIZE=30 MAXLENGTH=25></DIV><br/>
<DIV>Last Name:<INPUT TYPE='text' NAME='lname' VALUE='Enter Last Name' SIZE=30 MAXLENGTH=25></DIV><br/> 
<DIV>Password:<INPUT TYPE='password' NAME='password' SIZE=30 MAXLENGTH=25></DIV><br/> 
<DIV>Retype Password:<INPUT TYPE='password' NAME='rpassword' SIZE=30 MAXLENGTH=25></DIV><br/>
<DIV>Email:<INPUT TYPE='text' NAME='email' VALUE='Enter Your Email' SIZE=30 MAXLENGTH=25></DIV><br/> 
<DIV>Sex:<INPUT TYPE='radio' NAME='sex' VALUE='M'>Male<INPUT TYPE='radio' NAME='sex' VALUE='F'>Female</DIV><br/>
<DIV>Write About You:<TEXTAREA NAME='about' COLS=30 ROWS=4></TEXTAREA></DIV><br/>
<DIV>Your Academic Level: <SELECT><OPTION>High School<OPTION>College Degree<OPTION>University Degree</SELECT></DIV><br/>
<DIV>Select your Topic to Subscribe:<br/><INPUT TYPE='checkbox' NAME='topic' VALUE='M'>Multiple Choice Questions<br/>
<INPUT TYPE='checkbox' NAME='topic' VALUE='T'>IT Tutorials<br/>
<INPUT TYPE='checkbox' NAME='topic' VALUE='P'>Programming Guide<br/><br/>
<INPUT TYPE='submit' VALUE='Submit'><INPUT TYPE='reset' VALUE='Reset'>
</FORM>
</body>
</html>

Preview of the above HTML Code

 

Subscription Form


First Name:

Last Name:

Password:

Retype Password:

Email:

Sex:MaleFemale

Write About You:

Your Academic Level:

Select your Topic to Subscribe:
Multiple Choice Questions
IT Tutorials
Programming Guide



Here I have posted the HTML codes for sample only. You can customize this form according to your requirement. You can extract and use any element to create your own form.



Related Posts:

    مرسلة بواسطة في
    التسميات: ,

    ليست هناك تعليقات:

    إرسال تعليق

    الاشتراك في: تعليقات الرسالة (Atom)