from和inpu的用法介绍（Mac实操版）
Mac版写HTML与Windows版不同，但思路不变。首先，创建HTML文件， 通过快捷键command+space 搜索“文本编辑”App。
接下来，点击新建文稿
将文稿重命名，改为html后缀结尾，如下图所示
通过选择VScode的打开方式，就可以进行网页的编写啦
想要把网页渲染效果如下图，首先要了解from标签的常用属性
name属性：表单的名字，在一个网页中用于唯一识别一个表单。
action属性：表单处理方式，简单来说就是提交到哪里，往往是E-mail地址或网址。
method属性：表单数据提交方式，常用的有GET和POST（Get 查数据，POST 传数据）
除了表单的属性，还需要了解表单元素。表单是一个容器，可以存放各种表单元素，如按钮、文本域
等等。常见表单元素如下：
input：该标签用来定义用户可输入数据的输入字段，根据不同type属性，输入字段可以是文本字段、密码字段、复选框、单选按钮、按钮、文件、图像等等。
其语法格式为：<input type:"表项类型" name="表项名" value="默认值"size="x" maxlength="y"/>
input元素中常用属性如下：
type：指定加入表单项目的类型（text、password、checkbox、radio、button、file、 submit、reset等）
name：该表项的控制名，主要在处理表单上起作用
output：该标签用来定义不同类型的输出
keygen：该标签用于表单的密钥对生成器字段
object：该标签用来定义一个嵌入的对象
select：该标签用来定义下拉列表/表单
textarea：该标签用来定义一个多行的文本输入区域
知道这些我们就可以开始编写网页了，代码如下x
<form action="#" method="GET">
账号：<input type="text" name="账号"><br>
<!--若type=“password+空格”，则密码明文显示-->
密码：<input type="password" name="密码"><br>
<!--定义单选按钮时，同一组中的选项必须指定相同name，“单选”才生效-->
爱好：篮球<input type="checkbox" name="爱好" value="篮球">
唱歌<input type="checkbox" name="爱好" value="唱歌">
性别：男<input type="radio" name="性别" value="男">
女<input type="radio" name="性别" value="女">
<input type="reset" value="重置">
<input type="submit" value="提交">
<input type="button" value="其他普通按钮">
</form>
渲染效果如图：
注意：checkbox为复选框，可以进行多选。radio为单选框，只能单选。
因此，上面编写的表单中，“爱好”项是可以多选的，“性别”项目只能单选
通过这个方法，在网页填写的表单，按“提交”后，自动在网页地址栏呈现，如下图
第二种方式是提交到API，代码如下
<h2>实验2:提交到测试API</h2>
<!--
【from标签的常用属性说明】
action=提交到哪里
method=提交方式，常用的有GET和POST（GET 查数据，POST 传数据）
target=“_blank” 提交后在新标签页打开结果，不覆盖当前表单页面
enctype=“multipart/from-data”表单包含文件上传时，必须加此编码格式；无文件上传时不需要加
-->
<form
action="https://httpbin.org/post"
method="POST"
target="_blank"
enctype="multipart/form-data"
>
账号：<input type="text" name="账号"><br>
密码：<input type="password" name="密码"><br>
爱好：篮球<input type="checkbox" name="爱好" value="篮球">
唱歌<input type="checkbox" name="爱好" value="唱歌">
性别：男<input type="radio" name="性别" value="男">
女<input type="radio" name="性别" value="女">
身份证照片：<input type="file" value="上传你的身份证照片" name="身份证照片"><br>
<input type="reset" value="重置">
<input type="submit" value="提交">
</form>
效果如下