|
The majority of web browsers will warn you before sending out information through a form, because of security reasons in case you have entered sensitive information like credit card numbers, social security numbers or tax id numbers.
You can also have multiple forms in an HTML or XHTML document. However, you cannot have forms nested inside one another.
Now let's get started with coding in our <form> tags.
<html>
<head>
<title>Welcome To HTML & XHTML</title>
</head>
<body>
<form>
</form>
</body>
</html>
Now let's add the required action attribute. You will need the URL of the Web applications location that will be used to process the forms data as the value for the action attribute. So when the user fills out the form and then submits it, the data is then sent to a CGI script or to an HTML or XHTML document that has server-side scripts. And then the script sends back the data by e-mail or stores it in a database.
You can create your own Web application but you will need to know what programming language your hosting company supports, for example do they support PHP, CGI, Pearl and so on, but most hosting companies usually provide you with a simple application script for you to handle your forms.
You can also use the mailto attribute. Using the mailto attribute in a form will display your e-mail address as the return address when you submit the form. However, Internet Explorer 6 and Mozilla type browsers no longer support the mailto attribute for the <form> tag, so I will leave it at that. If CGI processing is a no for you, then you can look for third party companies to handle your forms. I will list a few links below for you to look at.
formassembly.com formbreeze.com formspring.com
If you forget to add the required action attribute and someone submits the form. The current page will reload itself, setting all the form tags or elements to their default values.
Let me show you how to code in the action attribute.
<html>
<head>
<title>Welcome To HTML & XHTML</title>
</head>
<body>
<form action="http://www.yourdomain.com/cgi/gdform.cgi">
</form>
</body>
</html>
Now let's add another required attribute called the method attribute in which you have two values to choose from, one is called post and the other is called get. The method attribute tells the browser which method to use when sending the forms data to the server for processing.
So in a nutshell, the post method tells the browser to send the data in two steps. The first step, the browser contacts the forms processing server that you stated in the action attribute. And in the second step after the server has been contacted the forms data is then sent in a separate process.
Now the get method only has one-step, it contacts the forms processing server and attaches the forms data to the URL you stated in the action attribute. The browser will then use a question mark (?), to separate the data from the URL.
Now which method you use is up to your hosting companies form-processing server. However, most of your browsers support either method.
Just like the action attribute if you forget to add the required method attribute and someone submits the form. The current page will reload itself, setting all the form tags or elements to their default values.
Now let me show you how to code the required method attribute.
<html>
<head>
<title>Welcome To HTML & XHTML</title>
</head>
<body>
<form method="post" action="http://www.yourdomain.com/cgi/gdform.cgi">
</form>
</body>
</html>
Now let's give life to our form, which mostly makes use of the <input> tag to do this. An end tag for the <input> tag is forbidden in HTML but in XHTML, it is required so I will show you how to code the XHTML way. The <input> tag is also known as a form control. Note not all <input> tags are visible on a web page.
Here is how to code the <input> tag.
<html>
<head>
<title>Welcome To HTML & XHTML</title>
</head>
<body>
<form method="post" action="http://www.yourdomain.com/cgi/gdform.cgi">
<input />
</form>
</body>
</html>
Now let's add the required type attribute which has many values but for now we will talk about the value text which creates a text <input> tag, this is the default value for the <input> tags type attribute which allows your user to type in text. Also, note that in most browsers, the width of the text field is dependent on the browser. However, the maximum length is unlimited, but there are other attributes that allow you to control the text box as well as how many characters are allowed, we will discuss them in a while.
Now lets code in the required type attribute with the value text.
<html>
<head>
<title>Welcome To HTML & XHTML</title>
</head>
<body>
<form method="post" action="http://www.yourdomain.com/cgi/gdform.cgi">
Full Name:
<input type="text" />
</form>
</body>
</html>
Now I will show you how the type attribute with the value text is displayed in the browser.
Now lets add another required attribute called name which gives a name to the text <input> tag. The name attributes value along with the value of the <input> tag that the user entered will be sent to the form processing server. When naming your name attributes value it's best if you just stick with letters and with spaces represented by underscores (_).
I will only show you how to code in the name attribute because it only gives the <input> tag a name.
<html>
<head>
<title>Welcome To HTML & XHTML</title>
</head>
<body>
<form method="post" action="http://www.yourdomain.com/cgi/gdform.cgi">
Full Name:
<input type="text" name="full_name" />
</form>
</body>
</html>
Now let's talk about the size and maxlength attributes. The size attribute sets the width of the text box. You can use any number to set the size of the text box. The width is determined by the font setting or the tags default font setting. The size attributes default size is 20.
The maxlength attribute specifies the maximum number of characters the user can input in the specified tag. The default setting is an unlimited number of characters in the text box. You can specify any number value for the maxlength attribute.
Now I will show you how to code the size and maxlength attributes. The value for the size attribute will be 50 and the maxlength value will be 4. Therefore, the text box will be fifty characters long and you will only be able to type in four characters in it.
<html>
<head>
<title>Welcome To HTML & XHTML</title>
</head>
<body>
<form method="post" action="http://www.yourdomain.com/cgi/gdform.cgi">
Full Name:
<input type="text" name="full_name" size="50" maxlength="4" />
</form>
</body>
</html>
Now here is how the code will be displayed in a browser. Try typing more then four characters in the text box, you can't go past four or can you?
Now let's talk about the submit and reset buttons. The words submit and reset are the type attributes other values for the <input> tag. The submit button does exactly what it says when you press the submit button it will automatically send the forms data to the form-processing server.
Now the reset button does exactly what it says as well, it clears all the contents of the tags in the form or sets them back to their default values.
You can also include the name attribute for both the submit and reset buttons, but it is not required.
Now let's add the submit and reset buttons to the form.
<html>
<head>
<title>Welcome To HTML & XHTML</title>
</head>
<body>
<form method="post" action="http://www.yourdomain.com/cgi"gdform.cgi">
Full Name:
<input type="text" name="full_name" size="50" maxlength="4" />
<p>
<input type="submit" />
<input type="reset" />
</p>
</form>
</body>
</html>
Now here is how the code will be displayed in a browser.
Now what if you don't want your submit and reset buttons to have the default labels of submit query and reset. You will then need to use the value attribute to change the labels for the buttons. I will show you the value attribute in action, but first let's write in the code.
I will use the value Send Name for the submit button and the value Clear for the reset button. Let me show you what I mean below.
<html>
<head>
<title>Welcome To HTML & XHTML</title>
</head>
<body>
<form method="post" action="http://www.yourdomain.com/cgi/gdform.cgi">
Full Name:
<input type="text" name="full_name" size="50" maxlength="4" />
<p>
<input type="submit" value="Send Name" />
<input type="reset" value="Clear" />
</p>
</form>
</body>
</html>
Here is how the code will look.
When using the XHTML strict DOCTYPE you must wrap all your forms tags like the <input> tags and <textarea> tags with a block-level tag, for example the <p> or <fieldset> tags and so on, in order for your web page to validate.
Now there is still a lot more to forms so check out the other form tutorials.
|
