Showing posts with label form. Show all posts
Showing posts with label form. Show all posts
Monday, February 6, 2017
How to create a simple form using HTML
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.
<INPUT> Tag: The most form tag is <INPUT> tag. The type of INPUT is specified with the TYPE attribute. This tag doesnt 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.
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 doesnt 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
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:
How To Create Simple Image Slideshow Using JavaScript ?
Image Slideshow with Navigation Buttons Using JavaScript
How to Create JavaScript Image Slideshow with LInks
How to Display Date Format in JavaScript?
How to Create a Digital Clock in JavaScript?
What are the Different Ways to Redirect Page in JavaScript?
How to Detect Visitors Browser Using JavaScript?
How to make rounded corners border using CSS
How to Create Custom CSS Template for Printing
How to Create Responsive Website or Blogger Template
Go to link Download
Saturday, January 21, 2017
How to validate required field in a form using javascript
How to validate required field in a form using javascript
In a wave form, fields are needs to validate at the time of entry or on submission of form. Generally in a form it needs to validate user has left required fields empty or not, user has entered valid e-mail address or not, user has entered a valid date, user has entered text in a numeric field or not and other also.
Here is a function below to validate if a required field has been left empty. If the required field is blank, an alert box alerts a message and the function returns false. If a value is entered, the function returns true.
Function to validate required field in a form using javascript
function validate_required(field, alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt); return false}
else {return true}
}
}
Full script, with the HTML form to validate required field
<!DOCTYPE html>
<html>
<head>
<script>
function validate_required(field, alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt); return false}
else {return true}
}
}
function validate_form(thisform)
{
with(thisform)
{
if(validate_required(email, "Email must be filled out!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email:<input type="text" name="email" size="40">
<input type="submit" value="submit">
</form>
</body>
</html>
Preview of the above code, to validate required field
Related Posts
- How to Create a Digital Clock in JavaScript?
- How to Detect Visitors Browser Using JavaScript?
- What are the Different Ways to Redirect Page in JavaScript?
- How To Create Simple Image Slideshow Using JavaScript ?
- How to Create Simple JavaScript Fade Effect Animation?
- Image Slideshow with Navigation Buttons Using Javascript
- How to Create JavaScript Image Slideshow with Links
- Simple JavaScript Fade Effect Animation Using Jquery
Go to link Download
Monday, December 19, 2016
How to Validate a HTML Form Using JavaScript
How to Validate a HTML Form Using JavaScript
In the previous post, I have described about "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. In this post I am going to describe about to Validate a this HTML Form Using JavaScript.
You can validate a HTML Form Using JavaScript for the following circumstances.
Here in this post I am going to describe you, "How to Validate Required Fields using JavaScript.
This JavaScript Function below checks if a required field has been left empty. If the required field is blank, an alert box alerts a message and the function returns false. If the value is entered the function returns true.
You can validate a HTML Form Using JavaScript for the following circumstances.
- Whether or not the user left required fields empty
- Whether or not the user entered a valid e-mail address
- Whether or not the user entered a valid date
- Whether or not the user entered text in numeric field or entered number in text field
Here in this post I am going to describe you, "How to Validate Required Fields using JavaScript.
Validating Required Field using JavaScript
This JavaScript Function below checks if a required field has been left empty. If the required field is blank, an alert box alerts a message and the function returns false. If the value is entered the function returns true.
function validate_required(field, alerttxt)
{
with(field)
{
if (value===null||value==="")
{alert(alerttxt); return false;}
else {return true;}
}
}
Complete JavaScript Code with HTML for Validating Required Field
Here are the complete JavaScript codes along with complete HTML codes uses with the JavaScript Functions given below.
<html>
<head><title>Subscription Form</title>
<script type="text/javascript">
function validate_required(field, alerttxt)
{
with(field)
{
if (value===null||value==="")
{alert(alerttxt); return false;}
else {return true;}
}
}
function validate_form(thisform)
{
with(thisform)
{
if (validate_required(fname, "First name must be filled out!")===false)
{fname.foucus(); return false;}
if (validate_required(lname, "Last name must be filled out!")===false)
{lname.foucus(); return false;}
if (validate_required(password, "Password must be filled out!")===false)
{password.foucus(); return false;}
if (validate_required(rpassword, "Retype Password must be filled out!")===false)
{rpassword.foucus(); return false;}
}
}
</script>
</head>
<body>
<FORM METHOD=GET ONSUBMIT="return validate_form(this);" ACTION="http://www.siteforinfotech.com/p/about-us.html">
<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/>
<br/>
<INPUT TYPE=submit VALUE=Submit><INPUT TYPE=reset VALUE=Reset>
</FORM>
</body>
</html>
Preview of the above HTML Code
Here I have posted this JavaScript and HTML codes for sample only. You can write validation JavaScript to validate other fields for other circumstances.
Related Posts:
How To Create Simple Image Slideshow Using JavaScript ?
Image Slideshow with Navigation Buttons Using JavaScript
How to Create JavaScript Image Slideshow with LInks
How to Display Date Format in JavaScript?
How to Create a Digital Clock in JavaScript?
What are the Different Ways to Redirect Page in JavaScript?
How to Detect Visitors Browser Using JavaScript?
How to make rounded corners border using CSS
How to Create Custom CSS Template for Printing
How to create a simple form using HTML?
Go to link Download
Subscribe to:
Posts (Atom)