<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>HTML5 Form Input Elements</title> <style> body { background-color:#fff; color:#000; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; margin-left:20px; } h1 { color:#063; } form { margin-left:40px; } label { font-weight:bold; } label { display:inline-block; width:100px; } </style> </head> <body> <h1>HTML5 Input Elements</h1> <form method="post" enctype="multipart/form-data" name="form1"> <p> <label for="search">Search:</label> <input type="search" name="search" id="search"> </p> <p> <label for="phone">Phone:</label> <input type="text" name="phone" id="phone"> </p> <p> <label for="website">Website:</label> <input type="url" name="website" id="website"> </p> <p> <label for="email">Email:</label> <input type="email" name="email" id="email"> </p> <p> <label for="tickets">Tickets required:</label> <input name="tickets" type="number" id="tickets"> </p> <p> <label for="rating">Rating:</label> <input type="range" name="rating" id="rating"> </p> <p> <label for="color">Color:</label> <input type="color" name="color" id="color"> </p> <p> <input type="submit" name="send" id="send" value="Submit"> </p> </form> </body> </html>
用来做年龄输入啥的 还不错
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>HTML5 Slider</title> <style> body { background-color:#fff; color:#000; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; margin-left:20px; } h1 { color:#063; } form { margin-left:40px; } label { font-weight:bold; } label { display:inline-block; width:150px; } </style> </head> <body> <h1>HTML5 Slider</h1> <form method="post" name="form1"> <p> <label for="rating">Rating:</label> <input type="range" name="rating" id="rating" min="0" max="25" step="5" value="0"> </p> </form> </body> </html>