这是我参与「第四届青训营 」笔记创作活动的第八天

HTML基础知识总结(八)

接上一篇文章，本 章 着 重 复 习 Html 的 基 础 内 容 ， 学 习 Html 究 竟 要 学 些 什 么 呢 ？ 主 要 是 学 习 input表单控件的最后一部分 ，来 搭 建 网 页 的 “ 结 构 ” 。

在 HTML 中 ， 一 个 完 整 的 表 单 通 常 由 表 单 控 件 （ 也 称 为 表 单 元 素 ）、 提 示 信 息 和 表单域 3 个 部 分 构 成 。 我们本篇介绍一下：input控件的最后一部分！！！

一、按钮

1.submit 提交

(1)概述：

submit：是一个提交按钮。可以提交表单信息。

按钮内部默认的文字是“提交”，可以改变为其他的文字。

点击了提交按钮，可以把 表单域form里面的表单元素 里面的值，提交到后台服务器。

(2)基本的语法：

<form >
    <input type="submit" >
    <input type="submit" value="免费注册">
  </form>

(3)效果如图：

我们看到：默认的(没有起别名的)，就是"提交"。但是第2个按钮，我修改了文字为"免费注册"，从而在网页中提示用户该如何操作！！！

2.button 普通按钮

(1)概述：

普通按钮：button,后期结合 js 使用！

可以用来进行一个网页的交互操作，如点击 button 按钮，就可以发送一个验证码，就可以自动识别填写的密码是否长度不够。

(2)基本的语法：

 <form>
     <!--普通按钮：button,后期结合js使用！-->
     <input type="button" value="获取短信验证码">   <br>
  </form>
  

(3)效果如图：

我们可以看到，这个按钮，就是最普通的 input 的按钮元素，现在学习 HTML 还不能发挥作用，需要学习 JS 后才能进行交互操作！！！

3.reset 重置按钮

(1)概述：

reset 重置按钮，可以还原 表单元素初始的默认状态

(2)基本的语法：

<form >
    <input type="reset" value="重新输入"> 
  </form>

(3)效果如图：

点击“重新输入”按钮之后，就可以看到表单元素清零！！！

二、文件上传框：

(1)概述：

文件域：file 。 使用场景：上传文件时， input 的 type 类型是 file.

(2)基本的语法：

<form>
    <!--文件域：file .使用场景：上传文件时。-->
    <input type="file" value="上传文件">
  </form>

(3)效果如图：

点击“选择文件”之后，就可以自动跳转到本地电脑里面的文件，来进行选择文件！！！

三、补充详细阐述： 表单 form

先看个基本语法

<form action="https://www.baidu.com/?tn=68018901_2_oem_dg" method="get">
    这里是表单标签！！！
  </form>

(1) action

action：指定提交数据的 URL。一般填写的是：用来提交表单元素的网址。

(2) method

method：指定提交方式。

具体的分类：2种比较常用, get/post。

get：

请求参数会在地址栏显示，请求参数大小是有限制的，不安全

post：

请求参数不会在地址栏中显示。请求参数的大小没有限制，较为安全。