<!DOCTYPE html> <html> <head> <title>HTML5 Froms</title> </head> <body> <h1>HTML Forms</h1> <form> <label for="username">Enter username:</label> <input type="text" id="username" name="username" placeholder="your name" required> <br><br> <label for="email">E-mail:</label> <input type="email" id="email" name="email" placeholder="your email" required> <br><br> <label for="password">password:</label> <input type="password" name="password" placeholder="choose a password" required> <p>Select your age:</p> <input type="radio" name="age" value="0-25" id="option-1"> <label for="option-1">0-25</label> <input type="radio" name="age" value="26-50" id="option-2"> <label for="option-2">26-50</label> <input type="radio" name="age" value="51+" id="option-3"> <label for="option-3">51+</label> <br><br> <label for="question">Security questions:</label> <select name="question" id="question"> <option value="q1">What colour are your favourit pair of socks?</option> <option value="q2">If you could be a vegetable, what it could be?</option> <option value="q3">what is your best ever security question?</option> </select> <br><br> <label for="answer">Scurity question answer</label> <input type="text" name="answer" id="answer"> <br><br> <label for="bio">Your bio:</label><br> <textarea name="bio" id="bio" cols="30" rows="10" placeholder="about you..."></textarea> <br><br> <input type="submit" value="Submit the form"> </form> </body> </html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter