Pub Pixel Avatar Image

HTML5 Snippets - Provide A Way For Your Users To Enter And Submit Information To Your Web Site

Published:

Rate Article (Sign in and be the first to rate this article.)

Article Details

Views: 1384

First Published:

Word Count: 1570

Edition: 1

Now if you want to provide a way for your users to enter and submit information to your web site. You will need to add a web form to your web page. Web forms can be used in many different ways that will allow your users to interact with your web site. For example, web forms can be used by your users to register for your web site, login, place orders, send emails, take polls, take surveys, retrieve search results from your web sites search engine, as well as many other things. But for our example, I will show you how to let your users enter and submit their full name to your web site.

Now in-order to add a form to your web page you will need to add the <form> element along with the action attribute and method attribute to your web page. The <form> element will represent your form as well as act as a container for other elements that will enable your users to enter and submit information to your web site. The <form> element also requires an end tag </form>. As I said before, other form elements can be placed in between the <form> elements start tag <form> and end tag </form>.

You will then need to add the action attribute. The action attributes value should be the URL of the script, for example, PHP or JavaScript, that will process the forms user submitted data. In HTML5 the action attribute is no longer required. If the action attribute is not added to the <form> element the <form> element will act as if the action attribute is present and has its value set to the current web page the form is located on. Its best to include the action attribute in-order to avoid your form from not working properly.

Next you will need to add the method attribute. The method attribute will tell the browsers which HTTP (Hypertext Transfer Protocol) method to use when the forms data is submitted to the script that will process it. The method attribute can have one of two values which include the get value or the post value. The get value, which is the method attributes default value, will send the forms submitted information as a query string attached to the action attributes URL using a question mark (?) to separate the URL from the query string. So, in-other words the get value will show the forms user submitted information in the URL. The post value will attach the forms submitted information to the body of the form which is then sent via the HTTP header. So, in-other words the post value will not show the forms user submitted information in the URL.

Now in-order to let your users enter their full name into your form you will need to add the <input> element along with the type attribute and name attribute to your web page. Now the <input> element when added to your web page will specify an input field also known as an input control that will allow your users to edit or enter data. Next you will need to add the type attribute. The type attributes value should be set to text in-order to create an input control that will display an empty text box that will hold a single line of plain text that a user can edit or enter text into. The text value will usually create an input control that has a width of about 15 - 20 characters or more depending on the browser. If a user enters more characters than the width of the input control the user will then be required to scroll to read the rest of the text that the user has entered into the input control. The text value is the type attributes default value.

Next you will need to add the name attribute. The name attributes value can be any text name describing your input control. Now the name attribute when added to an <input> element that has its type attribute set to the value of text, will pass the <input> elements information that the user edited or entered into the input controls text box, when the form is submitted. Even if the <input> element has no information to pass an empty value will be sent by the name attribute when the form is submitted. Now when the form is submitted the name attribute will send the <input> elements information to the action attributes URL value for the <form> element, which is a URL to a script that will process the forms user submitted data.

On a side note the <input> elements default behavior when the type attribute is left out, will be as if the type attributes value is set to text.

Now the last thing we need to do is to provide a way for your users to submit to your web site their full name that they entered into your web pages form. In-order to allow your users to submit their full name to your web site you will need to add the <input> element along with the type attribute and name attribute to your web page. Now the <input> element when added to your web page will specify an input field also known as an input control that will allow your users to edit or enter data. Next you will need to add the type attribute. The type attributes value should be set to submit in-order to create a submit button for your form, which will allow your users to submit the form to the URL specified by the <form> elements action attribute, which is the URL of the script that will process the forms user submitted data.

Next you will need to add the name attribute. The name attributes value can be any text name describing your input control. Now the name attribute when added to an <input> element that has its type attribute set to the value of submit, will pass the text that is displayed on the submit button created by the <input> element, when the form is submitted. The text displayed on the submit button is usually the word "Submit" or the words "Submit Query" depending on the browser. You may change the text that is displayed on the submit button, which you can learn how to do in another tutorial that was published called "HTML5 Snippets - Customize The Text That Is Displayed On Your Forms Submit Button". Now when the form is submitted the name attribute will send the <input> elements information to the action attributes URL value for the <form> element, which is a URL to a script that will process the forms user submitted data.

Now let me first show you the code by itself for the HTML snippet for providing a way for your users to enter and submit information to your web site using the <form> and <input> elements. And then I will show you how to code and where to place the HTML snippet for both HTML5 and XHTML5.

Here is the HTML code snippet below that will allow you to provide a way for your users to enter and submit information to your web site using the <form> and <input> elements.


<form action="URL to your forms validation script" method="Choose if the browsers should use the get or post method when sending your forms information to the script that will process your forms data">
 <input type="text" name="A name describing your <input> element" />
 <input type="submit" name="A name describing your <input> element" />
</form>

Here is the HTML code snippet that will allow you to provide a way for your users to enter and submit information to your web site using the <form> and <input> elements for HTML5 in the example below.


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>
  
 <form action="http://www.example.com/validate-form.php" method="post">  
  Full Name: <input type="text" name="full_name">  
  <input type="submit" name="submit_full_name">  
 </form>  

</body>
</html>

And here is the HTML code snippet that will allow you to provide a way for your users to enter and submit information to your web site using the <form> and <input> elements for XHTML5 in the example below.


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <form action="http://www.example.com/validate-form.php" method="post">  
  Full Name: <input type="text" name="full_name" />  
  <input type="submit" name="submit_full_name" />  
 </form>  

</body>
</html>

Article Tags

Tag Article (Sign in if you want to tag this article.)

Share This Article

Send To Facebook Link

Tweet This Link

Send To LinkedIn Link

Send To StumbleUpon Link

Digg This Link

Send To Google Plus One Share Link

Send To Reddit Link

Send To Tumblr Link

Send To Delicious Link

Send To FriendFeed Link

Send To Diigo Link

Email Link

AddThis Link

0 Comments

Leave Comment (Sign in and be the first to comment on this article.)

Important

This site cannot guarantee the accuracy of articles, comments, answers and other types of content or media submitted by members or anonymous users and guests, and we recommend that you use common sense when following any advice or information found on this site. Read our full Content Disclaimer Agreement for further information.