对于HTML5表单新增元素的小练习
来源：互联网 发布：centos 五笔输入法 编辑：程序博客网 时间：2024/06/08 05:05
![]()
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>表单新增元素</title> <style> *{ padding:0; margin:0; list-style:none;} body{ background:#CFF; } ul{ width:60%; height:30rem; margin:5rem auto;background: #FF80BF; font-size:1.1rem; color:#FFF;} ul li{ width:90%; margin:1.5rem auto; } ul li label{ width:30%; float:left; } ul li input{ width:30%; margin-left:1%; } ul li span{ width:30%; margin-left:1%;} </style> </head> <body> <form> <ul> <li> <label for="title">Title</label> <input type="text" required="required" placeholder="Mister"> </li> <li> <label for="name">Name</label> <input type="text" required="required" placeholder="Name"> </li> <li> <label for="phone number">Phone number</label> <input type="text" required="required" placeholder="+123456"> </li> <li> <label for="email address">Email adress</label> <input type="email" name="email" placeholder="496588619@qq.com" required="required"> </li> <li> <label for="your websit">Your websit</label> <input type="url" name="websit" required="required" placeholder="www.baidu.com"> </li> <li> <label for="nr">Nr.of items to order</label> <input type="number" value="0"> <span>(0-10)</span> </li> <li> <label for="length">Length</label> <input type="range" value="0"> <span>1m(in 10cm increments)</span> </li> <li> <label for="date">Delivery date</label> <input type="date"> <span>(minimun 16 December 2)</span> </li> <li> <label for="time">Time of delivery</label> <input type="time"> <span>(in 30 min incremnts)</span> </li> <li> <label for="color">Color of the item</label> <input type="color" value="#0099ff"> <span>(default blue)</span> </li> </ul> </form> </body> </html>
