HTML Form Elements | Lesson 33 HTML Tutorial
HTML FORM ELEMENT SAFHATECH

HTML Form Elements | Lesson 33 HTML Tutorial

This lesson will explain some of the HTML Form Elements like: select, dataselect, textarea. This lesson is one of html deep understanding course

This Visual Tutorial Explain the Same Lesson:

HTML Form Elements Video

The <input> Element

First and most important form element in HTML Form is the <input> element. The <input> element can be displayed in several ways, depending on the type attribute.

Example:

 <input name="firstname" type="text"> 

<select> Element

<select> element defines a drop-down list that contains options.

 <select name="PRO_LANGUAGES">
  <option value="HTML">HTML</option>
  <option value="PHP">PHP</option>
  <option value="CSS">CSS</option>
</select> 

Result:

The <option> elements defines an option that can be selected. By default, the first item in the drop-down list is selected, but to select element you could use selected attribute to the option.

Example:

  <option value="CSS" selected>CSS</option>

Number of Visible Values:

Use the size attribute to specify the number of visible values in the select element.

Example:

 <select name="PRO_LANGUAGES" size="3">
  <option value="HTML">HTML</option>
  <option value="PHP">PHP</option>
  <option value="CSS">CSS</option>
  <option value="JAVASCRIPT">JAVASCRIPT</option>
  <option value="SQL">SQL</option>
</select> 

Result:

Note: By default the selection elements are 1.

Multiple Selections:

Use the multiple attribute to allow the user to select more than one value in select tag.

Example:

<select name="PRO_LANGUAGES" size="3" multiple>
  <option value="HTML">HTML</option>
  <option value="PHP">PHP</option>
  <option value="CSS">CSS</option>
  <option value="JAVASCRIPT">JAVASCRIPT</option>
  <option value="SQL">SQL</option>
</select> 

Result:

Note: click ctrl + the element you want to select for more selection.

<textarea> Element

<textarea> element defines a multi-line input field (a text area) like the message in email or in contact us form.

Example:

 <textarea name="message" rows="6" cols="30">
Write your message here </textarea> 

Note: you could control the size with increasing or decreasing the ROWS attribute which control the height or COLS which control the width.

Result:



This post is one of the HTML5 for deep understanding course. where we will learn every common elements from basic to the advanced element.

In addition each lesson has a video which you could visit and watch for more practicing and for deep understanding.

We hope that we could give the best for you and for the deep and easy understanding.

You could follow the series from our website SAFHATECH.com and go to categories and then programming and then Choose the course you want then just click next post to go step by step.

Finally we hope every thing is works as you suspect.


Consequently You could follow us at :

Website URL: https://www.safhatech.com/

Youtube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instegram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone:967772223681

References: http://www.w3schools.com

Leave a Reply