又到了每天写博客时间，坚持每天写博客，记录生活
上次写博客用了差不多一个小时，质量感觉还ok
这次也是尽量控制在1h以内，同时保证质量，同样用心写博客
这次内容可能相对较少，写的只有表单，但是看了之前写的代码，感觉也不算少的
如果想看视频教学的孩子推荐看星月https://www.bilibili.com/video/BV1ds411r7o7
为什么这次不推荐看极客学院的呢？因为他讲的有点超前，主要是和php交互
如果之前有学过php的可以去看，不过既然都学过php了那想必和html5应该也是懂的
什么是表单？
相信大家都接触过问卷星的，里面让你们填的那些方框就叫表单，主要负责数据采集功能
右边链接是表单的一些属性的详解https://www.w3school.com.cn/html5/html_5_form_attributes.asp
下面就只是简单的介绍下表单的一些常用属性
Part1 表单的输入框设置
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title> 6 创建表单 7 </title> 8 </head> 9 <body> 10 <h1>创建各种表单的练习</h1> 11 <form> 12 随便创的输入框：<input type="text"> 13 <br><br> 14 学校：<input type="text" value="广州大学"> 15 <br><br> 16 身份：<input type="text" value="学生" readonly> 17 <br><br> 18 学号：<input type="text" placeholder="请输入账号"> 19 <br><br> 20 密码：<input type="password" placeholder="请输入密码"> 21 <br><br> 22 手机号：<input type="text" placeholder="请输入手机号" maxlength="11"> 23 <br><br> 24 学院：<input type="text" placeholder="学院名称" size="20"> 25 <br><br> 26 简介：<textarea rows=5 cols="100" placeholder="个人简介"></textarea> 27 </form> 28 </body> 29 </html>
从上面代码中，首先，我们要创建一个表单，第一步，我们要使用<form></form>元素
然后我们要想让用户输入信息，就需要一个输入框，这时我们要使用<input>元素
这里补充一下，上面的<br>元素是换行的意思，有些人也会写成</br>，其实效果应该是一样的
反正我是默认使用<br>的，因为vscode使用的就是<br>，所以为了省时也是懒得加斜杆
上面代码中的type属性是输入框的类型，不同的type会有不同的输入效果
text是可见的文本，password是加密后的文本，如各种网站的密码输入
value属性是文本框默认自带的值，默认可以修改
但是在只用readonly属性后就不可修改了
placeholder和value类似，它不是默认值，看起来比较模糊，用于提示用户输入什么信息
maxlength属性是用来限制用户输入文本的长度，上面的输入手机号就限制了你输入长度不得超过11
size属性是用来控制输入框的显示宽度，上面size=20可能效果不是很明显，改成60会明显很多
textarea元素是定义一个文本区域，可在此区域输入文本，无限制数量
关于textarea可参照https://www.w3school.com.cn/html5/html5_textarea.asp
rows是行，cols是列，用来设置显示区域大小
打开网页时的效果如下
输入信息后
这时大家会发现最下面那里的文本输入框大小变了，还出现了滚动条
原因在于我手动改了它，可拖动文本输入框右下角进行改动
当文本内容数量超过文本框承载区域时，就会出现滚动条
Part 2 表单的其他输入方式，以及按钮
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title> 6 创建表单2 7 </title> 8 </head> 9 <body> 10 <form> 11 <h1>1st 按钮的三种生成方法</h1> 12 <input type="button" value="按钮1"> 13 <button>按钮2</button> 14 <input type="submit" value="按钮3"> 15 16 <h1>2nd 滑块输入/数字输入框</h1> 17 默认滑块 18 <input type="range"> 19 <br> 20 自定义滑块 21 <input type="range" min="1" max="10" step="1" value="5"> 22 <br> 23 数字输入框 24 <input type="number" min="1" max="84" value="57"> 25 26 <h1>3rd 多选</h1> 27 你的爱好是？ 28 <br> 29 <input type="checkbox">唱 30 <input type="checkbox">跳 31 <input type="checkbox">Rap 32 <input type="checkbox">篮球 33 34 <h1>4th 多选一</h1> 35 你有freestyle吗？ 36 <br> 37 <input type="radio" name="y_n" checked>yes 38 <input type="radio" name="y_n" checked>no 39 <input type="radio" name="y_n">I do not know 40 41 <h1>5th 选择输入框</h1> 42 你最擅长的学科是？ 43 <br> 44 <select> 45 <option>语文</option> 46 <option>数学</option> 47 <option>英语</option> 48 <option>物理</option> 49 <option>化学</option> 50 <option>生物</option> 51 </select> 52 53 <h1>6th 可自行输入的选择输入框</h1> 54 你喜欢的颜色是？ 55 <br> 56 <input type="text" list="color"> 57 <datalist id="color"> 58 <option>红</option> 59 <option>蓝</option> 60 <option>黄</option> 61 <option>绿</option> 62 <option>白</option> 63 <option>黑</option> 64 </datalist> 65 </form> 66 </body> 67 </html>
打开网页时的效果如下
以上描述抄自我当时的随笔，还挺全的，代码上面不一定有我随笔所写的全部，有兴趣了解的可以去尝试下
Part 3 表单的其他功能
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title> 6 创建表单3 7 </title> 8 </head> 9 <body> 10 <form> 11 <h1>几种类型的输入</h1> 12 <input type="email"> <!-- 输入类型为邮箱，提交时会校验是否为邮箱 --> 13 <br> 14 <input type="tel"> <!-- 输入类型为电话，提交时会校验 --> 15 <br> 16 <input type="url"> <!-- 输入类型为Web地址，提交时会校验 --> 17 <br> 18 <input type="date"> <!-- 输入类型为日期，网页上会出现类似于日历的可选择工具 --> 19 <br> 20 <input type="color"> <!-- 输入类型为颜色，网页上会出现一个有颜色的标签，点击可更换输入的颜色 --> 21 <br> 22 <input type="hidden" value="yu"> <!-- 输入隐藏，输出时才会看到，值为yu --> 23 <br> 24 <input type="image" src="./photo/up.jpg"> <!-- 输入按钮为图片按钮，src为图片路径 --> 25 <br> 26 <input type="file" multiple> <!-- 输入文件，无multiple时只输入单个文件，显示文件名称；有multiple时可输入多个文件，显示文件个数 --> 27 </form> 28 </body> 29 </html>
打开网页时的效果如下
上面有一点做的不是很好，就是前三个输入框没有说明输入的是什么类型的（其实前面代码注释里面有写）
然后就是那个日期输入，这个功能还是挺强大的，
效果如下
然后下面有一个黑色的东西，用于选色，点击即可看到效果（懒得截图）
那个图片其实是一个输入按钮，是图片按钮
最下面还有一个选择文件的按钮，关于multiple属性见代码注释的描述
其实我们还忽略了第22行代码，详细见相应位置的注释
总结
总算写完啦 []~（￣▽￣）~* 下班
这次用的时间久一点，1小时20分钟，内容也没想象中那么少
会超时完成的原因应该是自己码了太多字，其实可以直接复制随笔的
但是为了加深印象，再概述一遍确实效果不错
最后希望这篇简单的随笔能对你们有所帮助吧（=￣ω￣=）
没用就当看着玩啦[狗头]