html basic elements

HTML FORM ELEMENTS:

The <input> Element: The most important form element is the <input> element. The <input> element can be displayed in several ways, depending on the type attribute.

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

The <select> Element: The <select> element defines a drop-down list. The <option> elements define 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

<select name="Days">
  <option value="volvo">Monday</option>
  <option value="saab">Tueseday</option>
  <option value="fiat">Wednesday</option>
  <option value="audi">thursday</option>
</select>

Visible Values: Use the size attribute to specify the number of visible values.

<select name="Days" size="3"> 
<option value="volvo">Monday</option> 
<option value="saab">Tueseday</option> 
<option value="fiat">Wednesday</option> 
<option value="audi">thursday</option> 
</select>

Allow Multiple Selections: Use the multiple attributes to allow the user to select more than one value.

<select name=”Days” size=”4″ multiple> <option value=”volvo”>Monday</option> <option value=”saab”>Tueseday</option> <option value=”fiat”>Wednesday</option> <option value=”audi”>thursday</option> </select>

The <textarea> Element: The <textarea> element defines a multi-line input field.

<textarea name="message" rows="10" cols="40">
Learnsimpli is free online tutorial.
</textarea>

The <button> Element: The <button> element defines a clickable button.

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

HTML5 Form Elements:

HTML5 added the following form elements:

• <datalist>
• <output>

HTML5 <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.

<form action="/action_page.php">
  <input list="months">
  <datalist id="months">
    <option value="January">
    <option value="February">
    <option value="March">
    <option value="April">
    <option value="May">
  </datalist>
</form>

HTML5 <output> Element: The <output> element represents the result of a calculation (like one performed by a script)

<form action="/action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>