Wednesday, October 10, 2012

Form + Table

Alright guys here is a short text tutorial on how to make a form in an html file. This one is according to the textbook.

First of all, here's the actual code I used to make the file:

<html>
<head><title>Form</title></head>
<body>
<form name="form" action="data.php" method="post">
<h1 align="center">Form</h1>

<table>
<tr>
<td>Name:</td>
<td>
<input type="text" name="name" size="30" maxlength="30">
</td>
</tr>

<tr>
<td>Email:</td>
<td>
<input type="text" name="email" size="15" maxlength="25">
</td>
</tr>

<tr>
<td>Password:</td>
<td>
<input type="password" name="password" size="12" maxlength="12">
<small>Maximum length is 12 characters.</small></td>
</tr>

<tr>
<td>Confirm Password:</td>
<td>
<input type="password" name="password2" size="12" maxlength="12">
<small>Re-enter your password.</small></td>
</tr>

<tr>
<td>Country of residence:</td>
<td>
<select name="country">
<option selected value="india">India</option>
<option value="france">France</option>
</select>
</td>
</tr>

<tr>
<td>Gender:</td>
<td>
<input type="radio" checked name="gender" value="m">Male
<input type="radio" name="gender" value="f">Female
</td>
</tr>

<tr>
<td>How do you connect to the internet?</td>
<td>
<input type="checkbox" checked name="connect" value="computer">Computer
<input type="checkbox" name="connect" value="cell">Cell Phone
</td>
</tr>

<tr>
<td>Upload your profile picture:</td>
<td>
<input type="file" name="propic"></td>
</tr>

<tr>
<td>Feedback:</td>
<td>
<textarea rows="5" cols="50" name="feedback">
Give us your feedback..
</textarea>
</td>
</tr>

<tr>
<td>
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</td>
</tr>

</table>
</body>
</html>
First up, we have the <html> tag, which is necessary for all html files.

Then, the <head> and <title> tags which are used to display text on the top of the browser.

Closing them, we move to the <body> tag. This tag tells what to do with the html body.

Next is the <form> tag. The name="form" is the name of the form, and action="data.php" is the file to
which the data will be sent to, and the method="post" is the method in which the information from the form will be sent to the data.php file. The </form> tag ends the form.

Then, I've aligned the text Form to the center and made it bigger.

Then, the <table> tag starts the table. The </table> tag ends the table.

The <tr> tag means Table Row. It creates a new row in which the data will be displayed. The </tr> tag ends the row.

The <td> tag means Table Data. It makes a new column for the data within the tags to be displayed. </td> tag ends the column.

Then we have the <input> tag. It makes a input field depending on the type we have set. In the first field, as it is a name, we will set the type to text, so, type="text" is used. We have to give a unique name to the field, and as it is a name field, I've set it's name to name. So, name="name" is used. Also, the maximum length of the name should not exceed 30 characters, and I've put the limit by using maxlength="30" and the input box should have the capacity to display 30 characters at once, so I've changed it's size to display 30 characters by using size="30".

Then, I've closed the <td> and <tr> tags by using </td> and </tr> respectively.

The second field should be displayed in a new row, so I've used the <tr> and <td> tags again and asked for the user's Email ID. Notice that I've changed name="email", the size="15" and maxlength="25". What happens is that the user will be able to enter 25 characters at most, but the input display shows only 15 characters at a time, and the rest can be viewed by scrolling.

Then in the next field, I've asked the user for a password. Here, I've used type="password" which will display black dots or asterisks depending on the browser, to hide the text. Also, I've changed name="password". Before closing the <td> tag, I've used the <small> and </small> tags as information for the user, that the maximum length of the password can be 12 characters.

Then, I've created another input field asking the user to re-enter is password to confirm that there are no typing mistakes or stuff like that.

Now, we use a drop-down menu to ask user for his country of residence. Let's say my service is available only in two countries: India and France. So, instead of the <input> tag, I've used the <select> tag. Also, I've set name="country". The next tag is <option> tag, and selected means that the specific option will be shown by default to the user. The value="india" is used to give a unique name (value) to that specific option. The <option> tag is closed by </option> and the <select> tag is closed by </select>.

Now, we have to ask the user to select any one from many options, so for that, we use the Radio buttons. For this, the type="radio" is used in the <input> tag. Also, see that both the options have the same name="gender". This is very important because only one of the options is to be selected. If all the options have different name="", then we can select all of them. The value="m" and value="f" is important too, because all the options have to have different unique IDs. Also, if we use insert checked in the <input> tag, that option will be selected by default. Don't get confused between name and value.

Now, I want the user to select one or more of the given options, so for that we can use Checkboxes. For that, we have to set type="checkbox". For this also, the name has to be the same for all the options, and the value unique. Also, if we use insert checked in the <input> tag, that option will be selected by default.

Now, if we want the user to select a file to be uploaded, we have to change type="file", and assign a name to it.

I want a really big text box for feedback from the user, so I'll use the <textarea> tag. The rows="5"  sets the number of rows in the text-box to 5, and cols="50" sets the number for columns to 50. Also, if I want some text to be displayed in the box, I'll have to type it before using the </textarea> tag, which ends the <textarea> tag.


Now that we have finished making our form, we need to have buttons for submitting the form, or resetting the data. For resetting the data, we use type="reset" and value="Reset". Note that the text in the value attribute will be displayed on the button. For the submit button, we use type="sumbit" and value="Submit".


So, now we end the table tag, the body tag, and the html tag, and save the file with a .html extension.

That's it for now. All the best! :)

For any questions, leave a comment here, or contact me on my facebook profile. I'll get back as soon as I can.

Update: To see what the webpage made by using the given code looks like, click here.

No comments:

Post a Comment