表单
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>表单</title> <style> form { width: 20%; height: auto; background-color: lightseagreen; margin: 0 auto; color: lightyellow; } </style> </head> <body> <!-- method属性有两个值第一个是post 第二个是get不同的是post密码发送url地址给相应的后台较get安全--> <form action="" method="post"> <!-- for属性值需要与表单的id一致，好处在于可以自动获取光标 --> <label for="name"> <!-- required属性要求用户在提交时必须要填写的而且带有自动表单检查功能 maxlength限制用户输入的字数--> 名称:<input type="text" placeholder="用户名" name="name" id="name" required maxlength="10" /> </label> <p> <label for="password"> <!-- password属性表示密码输入--> 密码:<input type="password" placeholder="包括数字和字母" name="password" id="password" required maxlength="10" /> </label> </p> <p> 性别： <label><input name="remale" type="radio" value="女" />女 </label> <label><input name="male" type="radio" value="男" />男 </label> <label><input name="maintain" type="radio" value="保密" />保密 </label> </p> <p> <label for="email">邮箱:</label> <input type="email" id="email" name="email" placeholder="要求数字和字母类似123455@qq.com" required /> </p> <p> <label for="search">关键字</label> <input type="search" name="search" id="search" list="my_key" /> <!-- datalist相当于输入框与下拉框select的结合体，可以更易于用户的选择 --> <datalist id="my_key"> <option value="html"></option> <option value="javascript"></option> <option value="css"></option> <option value="boosterap"></option> </datalist> </p> <p style="text-align: center;"> <button>提交</button> </p> </form> </body></html>
