![[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> <head> <meta charset="utf-8"> <title>文本框</title> <link rel="stylesheet" href="style/form.css" /> </head> <body> <h3 class="title">用户注册</h3> <!-- action 处理表单的程序 --> <form action="" method="" class="register" > <!-- 单行文本框 --> <label for="zh">帐号:</label> <!-- 控件类型 --> <!-- name 数据变量名 --> <input id="zh" type="text" name="zh" value="我是内容" required /> <label for="email">邮件:</label> <input type="email" id="email" value="2917322704@qq.com" required/> <!-- 密码型文本框 --> <label for="password">密码:</label> <input type="password" id="password" value="" placeholder="这里填密码" required/> <!-- 提交按钮 --> <!-- 2:单选按钮与复选框 --> <label for="bm">性别</label> <div> <!-- 一组单选必须用同一样的name 不然用不了单选 --> <input type="radio" name="nan" value="男" id="nan" /> <label for="nan">男</label> <input type="radio" name="nan" value="女" id="nv" /> <label for="nv">女</label> <input type="radio" name="nan" value="保密" id="bm" checked="" /> <label for="bm">保密</label> </div> <label for="">兴趣:</label> <div> <!-- 复选框的name 如果多个时 应该写成数组 --> <input type="checkbox" name="happy[]" id="dyx" value="game" /><label for="dyx">打游戏</label> <input type="checkbox" name="happy[]" id="kdy" value="kdy" /><label for="kdy">看电影</label> <input type="checkbox" name="happy[]" id="lvyou" value="lvyou" checked="" /><label for="lvyou">旅游</label> </div> <!-- 3:下拉框/下拉框 --> <label for="">学历</label> <select name="edu" id="edu"> <!-- <select name="edu" id="edu" multiple="" size="2"> --> <option value ="1">初中</option> <option value ="2">高中</option> <option value ="3" selected="">本科</option> <option value ="4">研究所</option> label 的优先级大于option的文本 <option value ="5" label="老司机" >自学成才</option> </select> <!-- 4:文件域与隐藏域 --> <label for="user-pic">头像:</label> <!-- 隐藏域 在前端是看不到的 他用于服务器后端处理用的 --> <input type="hidden" name="MAX_FILE_SIZE" value="80000" /> <input type="file" name="p_ic" id="user-pic"/> <!-- 头像占位符 --> <div class="user-pic" style="grid-column: span;2"></div> <label for="user-resume">简历:</label> <!-- 隐藏域 在前端是看不到的 他用于服务器后端处理用的 --> <input type="hidden" name="MAX_FILE_SIZE" value="800000" /> <input type="file" name="user_resume" id="user-resume"/> <!-- 简历占位符 --> <div class="user-resume" style="grid-column: span 2"></div> <!-- 5:文本域 --> <label for="duoxing">备注:</label> <textarea name="duoxing" id="duoxing" cols="5" rows="5"></textarea> <!-- <span class="tips">输入内容不能多于<em> 120个</em></span> --> <button>dlu </button> </form> <form action=""> <p>密码:<input type="text" name="usermame" id="" value="" /></p> <p>帐号:<input type="password" name="password" id="" value="" /></p> <p>昵称:<input type="text" name="nic" id="" value="" /></p> <p><button>提交</button></p> </form> </body></html><script src="style/demo7.js"></script>
总结:
form属性 作为提交表单 如果提交数据在form之外 那就会提交不上
第二章个人笔记
表单:
action 处理表单的程序
method 表单提交类型 默认为GET 还有一个POST
<label for="zh">帐号:</label>
<input id="zh" type="text" /> zh 是让他们两个定义起来
name 数据变量名
控件:
button 按钮
input : type = text 文本 password 密码 以此类推
placeholder 用于 里面提示内容
radio单选框
checkbox 复选框
checked 用于默认选择
下拉框:
<select> 下拉框
<label for="">学历</label>
<select name="edu" id="">
<option value ="1">初中</option>
<option value ="2">高中</option>
<option value ="3">本科</option>
<option value ="4">研究所</option>
</select>
multiple 把全部显示出来 可以跟size 这个可以自定义显示多少个然后可以下滑
selected 可以让某个值默认