HTML Form Elements

<input> Element

  • The <input> element displaying depending on the type attribute.

<select> Element

Program on select Element

<!DOCTYPE html>
<html>
<body>

<form action=”data.php”>
<select name=”cars”>
<option value=”Milk”>Milk</option>
<option value=”Coffee”>Coffee</option>
<option value=”Tea”>Tea</option>
</select>
<br><br>
<input type=”submit”>
</form>

</body>
</html>

Output

<textarea> Element

  • The <textarea> element defines a multi-line input textbox.
  • It contains rows and columns for size of the textarea.
Program on textarea Element

<!DOCTYPE html>
<html>
<body>

<form action=”data.php”>
<textarea name=”message” rows=”9″ cols=”20″>This is the textarea.</textarea>
<br>
<input type=”submit”>
</form>

</body>
</html>

Output

<button> Element

  • <button> element defines a clickable button.
Program on < button> element

<!DOCTYPE html>
<html>
<body>

<button type=”button” onclick=”alert(‘Hello World!’)”>Click Me!</button>

</body>
</html>

Output

HTML5 Form Elements

<datalist> Element

  • It specifies a list of pre-defined options for an <input> element.
  • The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.
Program on <datalist> element

<!DOCTYPE html>
<html>
<body>

<form action=”data.php”>
<input list=”Birds” name=”birds”>
<datalist id=”birds”>
<option value=”Sparrow”>
<option value=”Crow”>
<option value=”Peacock”>
<option value=”Parrot”>
<option value=”Egle”>
</datalist>
<input type=”submit”>
</form>

</body>
</html>

Output

<keygen> Element

  • It is provide a secure way to authenticate users.
  • It specifies a key-pair generator field in a form
Program on <keygen> Element

<!DOCTYPE html>
<html>
<body>

<form action=”data.php”>
Username: <input type=”text” name=”user”>
<br><br>
Encryption: <keygen name=”Security”>
<br><br>
<input type=”submit”>
</form>

</body>
</html>

Output
Username: Encryption:

<output> Element

  • <output> element represents the result of a calculation.
Program on <output> Element

<!DOCTYPE html>
<html>
<body>

<form action=”data.php”
oninput=”x.value=parseInt(a.value)+parseInt(b.value)”>
0
<input type=”Division” id=”a” name=”a” value=”50″>
580 +
<input type=”numbers” id=”b” name=”b” value=”50″>
=
<output name=”x” for=”a b”></output>
<br><br>
<input type=”submit”>
</form>

</body>
</html>

Output
0 580 + =

 

Leave a Reply

Your email address will not be published. Required fields are marked *