This tutorial will show you how to add select boxes and multi-select boxes to a form, how to retrieve the input data from them, how to validate the data, and how to take different actions depending on the input. Show Select boxLet's look at a new input: a “select” box, also known as a “drop-down” or “pull-down” box. A select box contains one or more “options”. Each option has a “value”, just like other inputs, and also a string of text between the option tags. This means when a user selects “Male”, the “formGender” value when accessed by PHP will be “M”.
The selected value from this input was can be read with the standard $_POST array just like a text input and validated to make sure the user selected Male or Female.
It's always a good idea to have a “blank” option as the first option in your select box. It forces the user to make a conscious selection from the box and avoids a situation where the user might skip over the box without meaning to. Of course, this requires validation.
( For a generic, easy to use form validation script, see PHP Form Validation Script ) Multi-selectSuppose you want to present a select box that allows the user to select multiple options. Here is how to create such an input in HTML:
Please note the similarity to a checkbox group. First, set multiple="multiple” as a property of the select box. Second, put The PHP code to process this field is very similar to the checkbox code.
As before, use “isset” is to make sure some values were selected. Using switchNow, let's change the multi-select box back to a standard single select box. We want to now perform different actions based on what selection the user makes. You could write a bunch of “if” statements, but that could get messy. Let's look at two ways: dynamic commands and the switch statement.
These two approaches have their pro's and con's. The switch method is basically a concise method of writing a bunch of “if” statements. Each case matches the variable passed the switch and performs all actions after that case up until a break statement. In this case, each case is redirecting to the corresponding page to the selected country. If the selected country is not found in one of the cases, the “default” case is assumed, and “Error!” is displayed. The second method is just passing the selected value to the header function to redirect to the correct page. The first method requires writing more code, but is more secure because it ensures the form only redirects to 6 pre-programmed cases, or else displays an error message and ends execution. The second method is much more concise, but less secure because a malicious user could monkey around with the form and submit whatever value he wants. If using method 2, it's a good idea to validate the selected country first, to make sure it won't result in a redirect to a malicious page. Download Sample CodeDownload the PHP form select samples below: php-form-select-1.zip php-form-select-2.zip See Also
How validate HTML dropdown?Validate (Check) HTML Select DropDownList using jQuery
Inside the jQuery OnClick event handler, the HTML Select DropDownList object is referenced and if the selected value matches the value of the default item then an error message is displayed using JavaScript alert message box.
How do you validate a dropdown?You can validate the DropDownList value on form submission using jQuery Validator, by applying “ValidationRules” and “ValidationMessage” to the DropDownList. jquery. validate. min script file should be referred for validation, for more details, refer here.
How do you show validation in HTML?The simplest HTML validation feature is the required attribute. To make an input mandatory, add this attribute to the element. When this attribute is set, the element matches the :required UI pseudo-class and the form won't submit, displaying an error message on submission when the input is empty.
Can HTML be used for validation?Conclusion- HTML Form Validation
Mainly there are two ways to perform HTML form validation. The first is using the built-in functionality provided in HTML5, and the second is by using JavaScript. Using the first method, we don't need to write extra code.
|