03_html5简单入门——表单（不包括php交互）

又到了每天写博客时间，坚持每天写博客，记录生活

上次写博客用了差不多一个小时，质量感觉还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>

打开网页时的效果如下

1、按键的三种生成方法

<input type="button" value="按钮1">是一般功能

　　 <button>按钮2</button> 功能比第一种丰富，且与JS合作

　　用于提交表单，但是要想提交成功有一个前提，你要在前面的form里面声明method属性

2、滑块

　　<input type="range"> 默认从0到100，初始值为50，步进1

<input type="range" min="1" max="10" step="1" value="5"> 自定义滑块，从1到10，步进为1，初始为5

3、数字输入框

<input type="number" min="1" max="84" value="57"> 如果你超出1-84的范围时会提示你输入的范围，初始为57

4、多选

<input type="checkbox">唱出现一个方框，可选可不选，一般不受其他因素影响，不选不输出，选了才输出

5、多选一

<input type="radio" name="y_n" checked>yes

<input type="radio" name="y_n" checked>no

<input type="radio" name="y_n">I do not know

这里要注意，如果name不相同，那么你选了之后不能取消，name相同时只会出现一种状态，默认第一种，

如果加了chaecked的话，那默认对应该种，遵循后到先得的原则，看你最后在哪个选项加入了checked

6、选择输入框

<select>...<option></option>...</select> 点击输入框会出现选项供你选择，必须选择，默认第一个选项

7、可自行输入的选择输入框

　　</datalist>

也是多选一，但是你可以不选，去输入你想输入的东西

以上描述抄自我当时的随笔，还挺全的，代码上面不一定有我随笔所写的全部，有兴趣了解的可以去尝试下

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分钟，内容也没想象中那么少

会超时完成的原因应该是自己码了太多字，其实可以直接复制随笔的

但是为了加深印象，再概述一遍确实效果不错

最后希望这篇简单的随笔能对你们有所帮助吧（=￣ω￣=）

没用就当看着玩啦[狗头]