<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> <!-- 我们！着重讲解！ form，里面的type属性到底有啥？ --> </head> <body> <form> <input type="text"> <br> <!-- 单行文本框--> <input type="text" value="气死？"> <br> <!--value用于占位，是系统默认帮你填的--> <input type="text" value="气死？" readonly > <br> <!--value用于占位，是系统默认帮你填的,readonly只读，不能修改--> <input type="text" placeholder="你输入吧"> <br> <!-- placeholder 用于提示--> <input type="text" placeholder="输入提示" maxlength="4"> <br> <!--这个框里面最多输入四个--> <input type="text" placeholder="输入提示" size="103"><br> <!--这个框长度为 103 --> <input type="password" placeholder="密码"><br> <!-- password 输入的文本会变成小点！！--> <textarea> 这是一个，嗯，文本区域</textarea><br><br> <textarea rows="20"> 这是一个，嗯，文本区域</textarea><br><br> <!--下面这三个提交按钮是有区别的--> <input type="button" value="点击就送！"> <button>点击也送！</button> <input type="submit" value="提交！"> <br><br><br> <!-- 滑表看起来很舒服--> <input type="range"><br> <input type="range" min="-100" max="500" step="100"><br> <input type="range" min="-100" max="500" step="100" value="400"><br> <input type="number" ><br> <input type="number" min="-100" max="100" value="66"><br> <!--勾选框很酷--> <input type="checkbox"><br> <!-- 只管本框有没有被选中--> <input type="radio">死亡 <input type="radio">生存 <input type="radio">死亡和生存 <br><!--不能实现三选一--> <input type="radio" name="甲">死亡 <input type="radio" name="甲">生存 <input type="radio" name="甲">死亡和生存 <br><br> <!--！！能实现三选一--> <!--仅仅实现挑选的功能--> <select> <option>遗忘</option> <option> 除了遗忘 </option> <option> 还有什么 </option> </select> <!--这里input和datalist结合,实现既可以人为输入,又可以挑选默认选项--> <input type="text" list="list1"> <datalist id="list1"> <option>忘了吧</option> <option>只能</option> <option>忘了它</option> </datalist> <br><br><br><br<br><br> </form> </body> </html>
结果如下：
