Basic Forms
When to use forms
Forms are used to capture data from your viewers and do something with that data. You can send it to yourself in an email, use it in a page using PHP or add it to a database using MySQL (or similar).How to create basic forms
Forms are created using the <form> tag. To add fields and buttons to a form, you almost always use the <input> tag, with the attribute type set. A type of text creates a text field, and a type of submit creates a button to submit the form;<form>
<input type="text" name="text">
<input type="submit" value="submit-text">
</form>
<input type="text" name="text">
<input type="submit" value="submit-text">
</form>
text - The unique name that will identify this particular text field.
submit-text - The word(s) to display on the button to submit the form.
For example;
<form>
Enter your name: <input type="text" name="username"><br>
Now click here: <input type="submit" value="Submit">
</form>
Enter your name: <input type="text" name="username"><br>
Now click here: <input type="submit" value="Submit">
</form>
Which produces this form;
Notice that you can write normal text and HTML tags inside the form, to improve the presentation and let your users know what data to enter where.
How to submit forms
At the moment, when you click Submit the current page is reloaded. You will usually want to send the data input in the form to a different page, or to an email address. You do this by using the <form> tag's action and method attributes;<form action="url / mailto:address" method="post
/ get">
url - The full or relative address of the page to send the form data to.
address - An email address to send the form data to.
post - Use the 'post' method, where the actual data is sent in the HTML header.
get - Use the 'get' method, where the actual data is added to the end of the URL given in the action attribute.
For example;
<form action="form-process.php" method="get">
Name: <input type="text" name="username"><br>
<input type="submit" value="Submit">
</form>
Name: <input type="text" name="username"><br>
<input type="submit" value="Submit">
</form>
Try filling in your name and submitting it; you should see a new page load with text saying, "Your name is the name you entered". There is a separate tutorial for processing form data using PHP to produce this output. Look at the address bar on the name page, it should say;
<http://kludge.psychopixi.com/webdesign/html/forms/form-process.php?username=the
name you entered>
If you don't want this information to be visible to users browsing your site, you should use method="post" instead.
Additional attributes
You can customise the look of the text field by using additional attributes, although if you are styling the field heavily, it might be a better idea to use CSS.<input type="text" name="name" maxlength="length"
size="number" value="text">
length - The maximum number of characters that can be entered in this field.
number - The number of characters wide the text field will be.
text - Default text to show in the field.
<form action="form-process.php" method="get">
Name: <input type="text" name="username" maxlength="10" size="40" value="your name"><br>
<input type="submit" value="Submit">
</form>
Name: <input type="text" name="username" maxlength="10" size="40" value="your name"><br>
<input type="submit" value="Submit">
</form>
Notice that the field is wider, and that the specfied text appears in the field by default. Try typing more than ten characters in the box.