学习笔记之聊聊 HTML 那些标签（三）

最新推荐文章于 2024-07-08 08:00:00 发布

HLQ_Struggle

最新推荐文章于 2024-07-08 08:00:00 发布

阅读量388

点赞数

分类专栏： Big front end（大前端）文章标签： HTML Form

本文链接：https://blog.csdn.net/u012400885/article/details/86503066

版权

Big front end（大前端）专栏收录该内容

24 篇文章 0 订阅

订阅专栏

LZ-Says：找到你了，却转了身。。。

表单< form>简述

表单是一种用于从用户收集输入数据的 HTML 机制，可以理解为表单是一个包含表单元素的区域，表单元素是允许用户在表单中输入内容一个个控件，比如：输入框（input）、文本域（textarea）、单选框（radio-buttons）、复选框（checkboxes）等。

表单使用 < form> 标签来表示。

一般我们会用于提交某些信息，例如，注册页，需要将用户填写的数据内容提交到后台进行处理。

而说到提交，当然有提交方式，在 HTML 中，常用的提交方式也有 Get、Post，是不是很开心呐～

那么，我们如何指定表单提交方式呢？
在这里插入图片描述
这里我们先来了解下在表单中，HTML 为我们提供了哪儿些可供我们飞起的属性呢？

action： 数据提交目标地址；
method： 指定提交服务器时使用的 HTTP 请求方式，默认为 get；
enctype： 属性指定浏览器如何编码数据并将其呈现给服务器。此属性有三个允许值。
- application/x-www-form-urlencoded：默认编码，此编码无法用于将文件上传到服务器（如果使用此编码，每个数据项的名称和值都使用用于编码 URL 的相同方案进行编码）；
- multipart/form-data：此编码用于将文件上传到服务器；
- text/plain：此编码因浏览器而异。
name： 规定表单的名称，类似标志；
accept-charset： 规定服务器处理表单数据所接受的字符编码；
novalidate： 对输入中的表单进行验证；
target： 浏览器的默认行为是用响应服务器替换页面。通过在表单元素上使用 target 属性来更改此行为且此属性的工作方式与 a 元素上的 target 属性相同，并且可以从目标范围中进行选择：
- _blank - 在新窗口（或选项卡）中打开服务器响应；
- _parent - 打开父框架集中的服务器响应；
- _self - 在当前窗口中打开服务器响应（这是默认行为）；
- _top - 在当前窗口中打开服务器响应（这是默认行为）；
autocomplete： 浏览器自动填写表单，有两个允许值:on（允许）和 off（禁止），默认允许。

而下面，开启我们撸码观花～

撸撸更健康

光说不练假把式，搞起来才是真理。

我们先来看个比较 low 的效果：在这里插入图片描述
那么首先，我们先来创建一个表单：

<body>
  <h5>这是 HLQ 第一个表单</h5>
  <form>
    
  </form>
</body>

运行之后，发现网页上只有一个标题显示出来了，如下所示：
在这里插入图片描述
这里小伙伴别担心，表单是不显示的。

下面依次介绍我们今天的小伙伴，介绍完，小 demo 也就撸的差不多了。

输入框，可谓是出场率百分之 99 的一位红人，语法很简洁：

<input type="类型" />

而类型有多少，请看（当然，这里面还包含了 HTML 5 新增的属性）：

checkbox： 将输入限制为 true / false 复选框；
color： 将输入限制为颜色；
date： 将输入限制为日期；
datetime： 将输入限制为具有时区的全球日期和时间；
datetime-local： 将输入限制为不带时区的全局日期和时间；
email： 将输入限制为格式正确的电子邮件地址；
month： 将输入限制为年和月；
number： 将输入限制为整数或浮点数；
radiobutton： 将输入限制为固定的选项集；
range： 将输入限制为指定范围；
tel： 将输入限制为格式正确的电话号码；
time： 将输入限制为一天中的时间；
week： 将输入限制为年和周；
url： 将输入限制为完全限定的 URL。

而这里，LZ 再次说明下其中的细节，之后我们就可以愉快的进行编码咯，当然 LZ 小白一枚，虽然依托于 W3C School，但是个人理解有限，如有错误，请及时告知，但愿学习笔记可以帮助有需要的小伙伴。

以下列表总结了大部分通用属性以及所代表含义：

autofocus： 自动获取焦点；
checked： 如果应用，请在最初显示时或表单重置时选中复选框；
dirname： 控制文本方向性；
list： 指定为此元素提供值的datalist元素的ID；
maxlength： 指定用户可以在文本框中输入的最大字符数；
pattern： 指定正则表达式模式以用于输入验证；
placeholder： 指定一个提示，告诉用户应该输入的种类；
readonly： 只读，无法编辑；
disabled： 禁用，无法编辑；
required： 指定用户必须输入/选中值以进行输入验证；
min： 为输入验证目的设置最小值；
max： 设置用于输入验证目的的最大值；
size： 指定元素在文本框中可见的字符数中的宽度；
value： 指定文本框的初始值。

按钮的使用方式如下：

submit： 指定该按钮将用于提交表单；
reset： 指定该按钮将用于重置表单；
button： 指定按钮没有特定的语义意义。

相对的日期这块，估摸着日后开发少不了，还是简单补补：

datetime： 获取全局日期和时间，包括时区；
例如：2014-07-19T16:42:39.421Z
datetime-local： 获取本地日期和时间（没有时区信息）；
例如：2014-07-19T16:42:39.421
date： 获取本地日期（没有时间或时区）；
例如:2014-07-20
month： 获取年份和月份（无日期，时间或时区信息）；
例如:2014-08
time： 获得时间；
例如:17:42:44.746
week： 获取当前周。

颜色输入：输入元素的颜色类型限制用户选择颜色。
颜色值正好表示为七个字符：前导＃，后跟三个两位十六进制值，表示红色，绿色和蓝色值（例如，＃FF1234）

<label>
  <input type="color"/>
</label>

隐藏输入：要将数据项发送到服务器而不向用户显示，请使用隐藏的输入元素。

<input type="hidden" name="recordID" value="1234" />

图像输入：输入元素的图像类型创建显示图像并在单击时提交表单的按钮，这种类型的输入元素支持以下所示的附加属性。

alt： 提供元素的文本描述。
formaction： 对于按钮元素
formenctype： 对于按钮元素
formmethod： 对于按钮元素
formtarget： 对于按钮元素
formnovalidate： 对于按钮元素
height： 指定图像的高度（以像素为单位）。
src： 指定应显示的图像的URL。
width： 指定图像的宽度（以像素为单位）。

textarea 元素创建一个多行文本框。它有局部属性：name，disabled，form，readonly，maxlength，autofocus，required，placeholder，dirname，rows，wrap，cols。

简述到这里，下面附上源码：

<!DOCTYPE html>
<html lang="ch">
<head>
  <meta charset="UTF-8">
  <title>表单 Study</title>
</head>
<body>
<h5>这是 HLQ 第一个表单</h5>
<form action="mailto:925954424@qq.com" method="post" enctype="text/plain">
  用户名：<input type="text" name="userName" placeholder="请输入用户名" required/>
  密码：<input type="password" name="userPwd" placeholder="请输入密码" autocomplete="off" autofocus/>
  <br/><br/>
  性别：
  <label>
    <input type="radio" name="sex" value="men" required/>
    男
  </label>
  <label>
    <input type="radio" name="sex" value="women"/>
    女
  </label>
  <label>
    出生日期：
    <input type="week" name="bir"/>
  </label>
  <br/><br/>
  <label>
    联系方式：
    <input type="tel" name="tel" placeholder="请输入联系方式"/>
  </label>
  添加照片
  <input type="file" name="headPic"/>
  <br/><br/>
  <label>
    爱不爱我
    <select name="select">
      <option value="love">爱</option>
      <option>Yes</option>
      <optgroup label="就不告诉你">
        <option value="wakaka">哇咔咔</option>
      </optgroup>
    </select>
  </label>
  <br/><br/>
  喜欢吃的食物：
  <label> <input type="checkbox" name="love" value="banana"> 香蕉</label>
  <label> <input type="checkbox" name="love" value="mgg"> 芒果</label>
  <label> <input type="checkbox" name="love" value="wahaha"> 哇哈哈</label>
  <br/><br/>
  <!-- 俩种方式实现按钮 -->
  <button>I'm button.</button>
  <input type="button" value="Hello"/>
  <input type="reset" value="重置"/>
  <input type="submit" value="提交"/>
  <br/><br/>
  <label>
    <input type="color"/> <input type="image" src="http://www.yonyou.com/sj/images/lg12.jpg" alt="完犊子"/>
  </label>
  <textarea rows="15" cols="66" placeholder="请输入内容"></textarea>
</form>
</body>
</html>

今日已毕，再战～！