![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：下次配个图
Collection
Collection
<!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限制用户输入的字数-->名称:<inputtype="text"placeholder="用户名"name="name"id="name"requiredmaxlength="10"/></label><p><label for="password"><!-- password属性表示密码输入-->密码:<inputtype="password"placeholder="包括数字和字母"name="password"id="password"requiredmaxlength="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><inputtype="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>