How to Use HTML Form Elements
We started this discussion by defining what HTML forms are and their main functions in web development process. We saw how the <FORM> element is used to define HTML form in a web page with the 2 attributes namely the “action” and the “method”.
We also saw how you could create a basic form for collecting data where we used a text box, a radio button and a submit button. In this class, we continue the discussion by focusing on more the form elements.
Here are the form elements that you’ll frequently use when working with forms:
The <INPUT> Element
It has many variations that are applied depending on the type of data that you’d like to collect. Here are examples of how you can use the <INPUT> element:
The <INPUT TYPE=”text”> is used to define a one line input field for collecting a text input from a user.
The <INPUT TYPE=”radio”> is used to specify the radio button—where a user has the option of selecting one out of many alternative options.
The <INPUT TYPE=”submit”> is used to specify a button that users will click on so that their form data can be sent to the server.
The <INPUT TYPE=”file”> is used to specify a file to be uploaded to a server.
The example below shows how the three <INPUT> elements can be used:
<FORM ACTION="action.php"> First Name: <INPUT TYPE="text" name="firstname" value="namisiko"> <BR> Last Name: <INPUT TYPE="text" name="lastname" value="last"> <INPUT TYPE="radio" name="sex" value="Male">Male <BR> <INPUT TYPE="radio" name="sex" value="female">Female <BR> <INPUT TYPE="file">: Upload your CV <BR><BR> <INPUT TYPE="submit" value="Send"> </FORM>
The <SELECT> Element
It is used to define a drop down list. Here’s an example that shows a drop down list for months:
<SELECT name="months"> <option value="jan">January</option> <option value="feb">February</option> <option value="March">March</option> <option value="apriI">April</option> </SELECT>
The <TEXTAREA> Element
It is used to define a text area—where multiple lines of text can be entered in a form by users. Here’s an example:
<TEXTAREA name="message" rows="20" cols="40"> The multiple lines of text will be entered here </TEXTAREA>
This marks the end of part one of our discussion on forms. Keep practicing so that you improve your skills in forms creation.
The <BUTTON> Element
It’s used to define a button that can be clicked. Here’s an example:
<BUTTON TYPE="button>Click Me</BUTTON>
The <Datalist> Element
It’s used to define a list of pre-defined options when you use the <INPUT> element. When you use this element, your users will see a drop down menu for the pre-defined options that you have specified by the <DATALIST> element.
Here’s an example of how to use this element:
<input list="months" name="months"> <datalist id="browsers"> <option value="January"> <option value="February"> <option value="March"> <option value="April"> <option value="May"> </datalist>
GET YOUR FREE PYTHON EBOOK!