|
12:19:46 AM
Thursday
Sep 09
| Forms There comes a time when you want to obtain input from the user or visitor. This is usually where forms come in to play. Here's a very simple form. <form method="post" action="submit.php">Notice that we first assign a method. The method can be either get or post. Basically the difference is that method get utilizes the URL, where there is a limit of about 2048 bytes. Method post passes the variables through the body, and your url stays clean. There is less of a limit when using post method, and that value is usually defined on the server. Post method forms can also optionally be encrypted to allow the transfer of binary data. The action attribute tells where the form submission is going, it could easily be an url like http://www.website.com/search We could have the form launch in another window using the target attribute on the form tag. <form method="post" action="submit.php" target="_blank">We could also step towards client side javascript error checking by naming the form and making use of the onsubmit event handler, which can only be applied to forms. A quick way to disable form submission (usually when testing) is by adding onsubmit="return false;" <form method="post" action="submit.php" name="f" onsubmit="return validate();">And most importantly, it is extremely important that you don't forget to close out your form using </form>Now, let me explain each possible type of input. The hidden input. <input type="hidden" name="task" value="process" />The hidden input is a variable I named 'task' with a value I wanted to be 'process'. Hidden input fields are behind the scenes and can be interacted with by client side javascript. The classic text input. <input type="text" name="firstName" />The most extreme I could get with the text input might be. <input type="text" name="firstName" value="Adam" size="10" maxlength="15" />This would have default text already in the input. The size is normally defaulted to 20 characters, I've changed it to 10. The maxlength attribute allows me to limit the number of characters which can be typed into the field. Don't forget you can control the way your inputs look by using CSS to control the font family & size, color & background color, padding or borders. You can also do some neat things with javascript event handlers, like onfocus, onblur, onkeyup, onmouseover, onclick. Sometimes you need to make an input grayed out and not clickable or editable. You would use the disabled attribute which should be written like this. <input type="text" name="firstName" disabled="disabled" />Similar to disabled is readonly. This makes an input clickable but not editable. The readonly attribute can be applied only to text inputs, password inputs and textareas <input type="text" name="firstName" readonly="readonly" />Checkboxes. <input type="checkbox" name="interested" value="yes" checked="checked" />Is just another variable, I named mine 'interested' and when checked its value is 'yes'. I also let it default as being checked Radios. Making a choice. <b>How would you rate your experience?</b><br />Notice I set a defualt by using the checked attribute? The above should look like: How would you rate your experience? Excellent Average Poor The textarea <textarea name="message" rows="4" cols="30" maxlength="1000">deafult text...</textarea>The textarea is similar to but different from an input of type text. This tag has a closing tag, and any default text you want to display goes inbetween the textarea tags. The attributes you set to the textarea tag is name, rows (number of characters), cols (for columns, number of characters). I also set maxlength which limits the user from typing more than 1000 characters. Sometimes it may be better to leave off the rows & cols and use CSS to define height and width in pixels. Select Option, Dropdown List <select name="fruits">The code above is basically creating a variable named fruits with the default value of 'apple' because of the selected="selected" attribute. I'm not using it in the example above, but the javascript event handler onchange can be applied to only the select tag. Select Multiple <select name="fruits[]" multiple="multiple" size="5">We have to apply a few changes to the select tag for it to accept multiple choices. First we set the name to an array using brackets [], then we apply the multiple attribute. The size attribute can be applied to the select tag to display a specific number of choices greater than 1. When using the multiple attribute the browser sets the size to like 4 by default. You use the Control key or the Shift key to select more than one option. Similar to the input of type text, is the password <input type="password" name="pass" />The characters typed in the password box will be converted to dots so people looking over the visitor's shoulder cannot read his password. Another thing I haven't mentioned yet is that any of these form inputs can have an id set to them. This would step us closer to performing DOM or JavaScript tricks. Its ok for your id and name attribute to be the same. Button. Most often you will always want to use a submit button, but there are times when you need a blank button you typically control with the onclick event handler. <input type="button" value="Click Me!" onclick="alert('clicked');" />The text of the button is whats in the value attribute. I could have applied the name attribute to have it to pass the value with the form, but I don't really see the point in naming buttons. The submit is very much like the previous button, but the submit button actually submits the form. <input type="submit" value="Submit!" />You could use an image for a submit button like this: <input type="image" src="images/submit.jpg" />the image type input behaves just like a submit button. It also passes the x & y coordinates the mouse was at in relation to the top left corner of the image. I don't see a whole lot of point in this, but you could make a very simple video game using it. Like a click somewhere on the map and hope you find treasure lottery game. File Uploads <form method="post" action="file-upload.php" enctype="multipart/form-data">We have to set the enctype attribute on the form tag to "multipart/form-data" to handle binary encryption. The browse button input is created simply using type="file" and assigning it a name.
Give a listen to my music...
|
Skills:
|