HTML5 and CSS3 Fundamentals – HTML Form Elements

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!