HTML FORMS PART 2 ON FORMS ELEMENTS

25TH TUTORIAL 2ND PART ON HTML FORME ELEMENTS


 This chapter describes all the different HTML form elements.

The <input> Element

One of the most used form element is the <input> element.

The <input> element can be displayed in several ways, depending on the type attribute.

Example

<!DOCTYPE html>

<html>

<body>

<h2>The input Element</h2>

<form action="/action_page.php">

  <label for="fname">First name:</label><br>

  <input type="text" id="fname" name="fname"><br><br>

  <input type="submit" value="Submit">

</form>

</body>

</html>                                        OUTPUT

The input Element

Top of Form

First name:


If the type attribute is omitted, the input field gets the default type: "text".Bottom of Form

 

All the different input types are covered in the next chapter: HTML Input Types.

The <select> Element

The <select> element defines a drop-down list:

Example

<!DOCTYPE html>

<html>

<body>

<h2>The select Element</h2>

<p>The select element defines a drop-down list:</p>

<form action="/action_page.php">

  <label for="cars">Choose a car:</label>

  <select id="cars" name="cars">

    <option value="volvo">Volvo</option>

    <option value="saab">Saab</option>

    <option value="fiat">Fiat</option>

    <option value="audi">Audi</option>

  </select>

  <input type="submit">

</form>

</body>

</html>

OUTPUT

The select Element

The select element defines a drop-down list:

Top of Form

Choose a car:                    

The <option> elements defines an option that can be selected.

By default, the first item in the drop-down list is selected.

To define a pre-selected option, add the selected attribute to the option:

 

The <textarea> Element

 

The <textarea> element defines a multi-line input field (a text area):

 

Example

 

<!DOCTYPE html>

<html>

<body>

<h2>Textarea</h2>

<p>The textarea element defines a multi-line input field.</p>

<form action="/action_page.php">

  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>

 <br><br>

  <input type="submit">

</form>

</body>

</html>



OUTPUT

Textarea

The textarea element defines a multi-line input field.

Top of Form

 

 

The <button> Element

The <button> element defines a clickable button:

Example

<!DOCTYPE html>

<html>

<body>

<h2>The button Element</h2>

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

</body>

</html>

OUTPUT

The button Element

Click Me!

 

The <fieldset> and <legend> Elements

The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element.

<!DOCTYPE html>

<html>

<body>

<h2>Grouping Form Data with Fieldset</h2>

<p>The fieldset element is used to group related data in a form, and the legend element defines a caption for the fieldset element.</p>

<form action="/action_page.php">

  <fieldset>

    <legend>Personalia:</legend>

    <label for="fname">First name:</label><br>

    <input type="text" id="fname" name="fname" value="John"><br>

    <label for="lname">Last name:</label><br>

    <input type="text" id="lname" name="lname" value="Doe"><br><br>

    <input type="submit" value="Submit">

  </fieldset>

</form>

</body>

</html>


OUTPUT


Grouping Form Data with Fieldset

The fieldset element is used to group related data in a form, and the legend element defines a caption for the fieldset element.

Top of Form

Personalia:First name:

Last name:


 

The <datalist> Element


The <datalist> element specifies a list of pre-defined options for an <input> element.

Users will see a drop-down list of the pre-defined options as they input data.

The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.


<!DOCTYPE html>

<html>

<body>

<h2>The datalist Element</h2>

<p>The datalist element specifies a list of pre-defined options for an input element.</p>

<form action="/action_page.php">

  <input list="browsers" name="browser">

  <datalist id="browsers">

    <option value="Internet Explorer">

    <option value="Firefox">

    <option value="Chrome">

    <option value="Opera">

    <option value="Safari">

  </datalist>

  <input type="submit">

</form>

<p><b>Note:</b> The datalist tag is not supported in Safari prior version 12.1.</p>

</body>

</html>

Bottom of Form

 FILE DOWNLOADING LINK


 

Bottom of Form

 


Comments

Post a Comment

Popular posts from this blog

HTML FORMS INPUT TYPES CHAPTER 25 PART THREE

Image
25 th TUTORIAL ON HTML FORMS INPUT TYPES PART THREE HTML Input Types This chapter describes the different types for the HTML  <input>  element.   HTML Input Types Here are the different input types you can use in HTML: <input type="button"> <input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="reset"> <input type="search"> <input type="submit"> <input type="tel"> <input type="text">...
Read more

HTML5 COMMENTS & CSS CHAPTER 8

Image
EIGHTH TUTORIAL ON HTML COMMENTS & CSS HTML comments are not displayed in the browser, but they can help document your HTML source code. HTML Comment Tags You can add comments to your HTML source by using the following syntax: <!-- Write your comments here --> With comments you can place notifications and reminders in your HTML: <!DOCTYPE html> <html> <body> <!-- This is a comment --> <p>This is a paragraph.</p> <!-- Comments are not displayed in the browser --> </body> </html> OUTPUT This is a paragraph. Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors: <!DOCTYPE html> <html> <body> <!-- Do not display this at the moment <img border="0" src="pic_trulli.jpg" alt="Trulli"> --> </body> HTML  Styles – CSS ...
Read more

HTML 5 BASIC TAG CHAPTER 3

Image
3 RD TUTORIAL ON HTML 5 BASICS TAGS           HTML Documents Tag All HTML documents must start with a document type declaration:  <!DOCTYPE html> . The HTML document itself begins with  <html>  and ends with  </html> . The visible part of the HTML document is between  <body>  and  </body> . HTML Headings Tags HTML headings are defined with the  <h1>  to  <h6>  tags. <h1>  defines the most important heading.  <h6>  defines the least important heading EXAMPLE <!DOCTYPE html> <html> <head><title>demo</title></head> <body>                 <h1>This is heading 1</h1>                 <...
Read more