HTML FORM ELEMENTS
HTML code to help to grow your web properties and consumer experience.
An input button
|
<!DOCTYPE html>
<html> <body> <button type="button" onclick="alert('www.google.com')">Click Me!</button> </body> </html> |
Drop box HTML code sample
|
<!DOCTYPE html>
<html> <body> <select> <option value="APPS">APPS</option> <option value="POS">POS</option> <option value="SECURITY">SECURITY</option> <option value="WEBSITES">WEBSITES</option> </select> </body> </html> |
Drop box HTML code sample with submit button
You can preselect an option with the selected attribute. |
<!DOCTYPE html>
<html> <body> <form action="action_page.php"> <select name="Options"> <option value="DEALS">DEALS</option> <option value="ENTERTAINMENT">ENTERTAINMENT</option> <option value="RESOURCES">RESOURCES</option> <option value="MOTIVATION">MOTIVATION</option> </select> <br><br> <input type="submit"> </form> </body> </html> |
A text area (a multi-line text input field)
|
<!DOCTYPE html>
<html> <body> <form action="action_page.php"> <textarea name="message" rows="10" cols="30"> Development of your brand is key in the marketplace </textarea> <br><br> <input type="submit"> </form> </body> </html> |
Using the <datalist> Element
Note: Teams with over a 50% chance of making it to semi-finals (excluding teams under 500). |
<!DOCTYPE html>
<html> <body> <form action="action_page.php"> <input list="NBA Teams" name="NBA Teams"> <datalist id="NBA Teams"> <option value="Cavs"> <option value="Clippers"> <option value="Spurs"> <option value="Thunder"> <option value="Warriors"> </datalist> <input type="submit"> </form> <p><b>Note:</b> Teams with over a 50% chance of making it to semi-finals (excluding teams under 500).</p> </body> </html> |
Using the <keygen> Element
|
<!DOCTYPE html>
<html> <body> <form action="action_page.php"> Username: <input type="text" name="user"> <br><br> Encryption: <keygen name="security"> <br><br> <input type="submit"> </form> </body> </html> |
Using the <output> Element
|
<!DOCTYPE html>
<html> <body> <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> </body> </html> |
An input button
The characters in a password field are masked (shown as asterisks or circles). |
<!DOCTYPE html>
<html> <body> <form action=""> User name:<br> <input type="text" name="userid"> <br> User password:<br> <input type="password" name="psw"> </form> <p>The characters in a password field are masked (shown as asterisks or circles).</p> </body> </html> |