Advance:HTML 表单 |输入类型

概要

Web 表单是任何网站的重要组成部分。它允许我们的网站访问者与我们取得联系并将信息发送到我们的数据库,其中可能包括订单和查询。HTML 可用于创建 Web 表单。在本教程中,您将了解所有HTML 输入类型:文本框、文本区域、单选按钮、复选框、下拉列表、隐藏字段、文件上传和按钮。代码的成功实现对于 HTML 表单的成功至关重要。有了这个,让我们开始吧!

HTML 表单简介

HTML 表单是文档的一部分,其中包含文本输入、密码、提交按钮等字段,以方便数据输入。

HTML 表单通常用于收集用户输入。此信息通常被发送到服务器进行处理。

HTML 表单的使用

当我们想从访问您网站的人那里收集数据时,HTML 表单非常有用。例如,当您注册/登录 Amazon、Myntra 或 Facebook 等服务时,您将姓名、电子邮件和密码等信息输入到他们的 Web/应用程序表单中。网页的联系表单通过 HTML 标记和 CSS 显示输入框和选项。

HTML 表单的语法

这是 HTML 表单的一般语法 -- HTML元素用于创建用于用户输入的 HTML 表单:

method="get|post"> <--input controls e.g. textfield, textarea, button --/> form>

元素是不同类型的输入元素的容器,例如:文本字段、复选框、单选按钮、提交按钮等。

HTML元素简介

HTML元素是基本的表单元素。它们用于创建表单字段。表单字段用于获取用户的输入。我们可以使用不同的输入字段来收集用户的不同信息。例如,我们可能在联系表单中有一个文本和电子邮件字段,而我们可能在调查表上有复选框和单选按钮。

例如,这里我们使用创建一个电子邮件字段来收集用户的电子邮件地址。

html>
<html lang="en">
  <head>
    <title>HTML Formtitle>
  head>
  <body>
    <form>
      <label for="email">Enter your Email <br />label>
      <Input type="email">Input>
    form>
  body>
html>

输出:

在上面的示例中,输入字段为“类型”电子邮件,因此,它将始终期望用户输入电子邮件地址。该表单是自我验证的。因此,如果我们输入了不正确的电子邮件地址(例如跳过“@”),那么它将立即抛出一个错误,表明需要电子邮件字段。让我们看看如何——

输入的无效电子邮件示例:

因此,这里的表单希望我们在电子邮件地址中包含“@”,因为我们提供的类型为电子邮件。

根据type属性中存在的值,input 元素可以提供各种字段。

使用HTML 元素,可以为基于 Web 的窗体创建交互式控件。因为,一旦您添加了“type”属性,HTML 表单就会提供多个自我验证。

HTML类型

的行为很大程度上取决于其 type 属性。如果未指定 type 属性,则默认使用“text”属性。

在这里,我们将详细讨论不同的类型及其示例——

输入类型“文本”

类型属性为“text”的输入元素指定文本输入字段。此字段有一个文本框,用户可以在其中编辑一行纯文本。文本控件收集小文本字符串,如标题、名称、标记等。

<input type="text"> //defines a single-line text input field

文本输入字段示例:

html>
<html lang="en">
  <head>
    <title>HTML Formtitle>
  head>
  <body>
    <form action="../../form-result.php" method="post" target="_blank">
      <p>First name: <input type="text" name="firstname" value="Deepa">p>
      <p>Last name: <input type="text" name="lastname">p>
      <p>
        Profession:
        <input
          type="text"
          name="profession"
          placeholder="Artist? Business? Engineer?"
        >
      p>
    form>
  body>
html>

输出:

让我们简单了解一下这里使用的输入元素—— action:表单操作属性指定在网页上提交表单时表单数据应发生的情况。action属性的值指示表单数据应发送到何处。type:type 属性指定要显示的元素的类型。如果未指定 type 属性,则默认类型为“text”。value:value 属性是一个 DOMString,它包含输入到文本字段中的文本的当前值。它指定与提交表单时发送到服务器的输入关联的值。在这里,我们已经给出了“名字”字段的默认值。占位符:占位符属性指定一个简短的提示,用于描述输入字段的预期值。在这里,我们在专业领域提供了一个占位符。

其他属性 输入字段中的一些其他属性

可能包括 -maxlength、minlength、pattern、readonly、size、spellcheck、list等。

输入类型“密码”

password类型的元素为用户提供了一种安全输入密码的方法。我们可以输入密码,该密码将显示为纯文本编辑器控件,其中文本被遮挡,因此无法读取,通常是通过将每个字符替换为星号(“*”)或点(“•”)等符号。

<input type="password"> //defines an obscure password field

例:

    
        ="pass">

Enter Password :

type
="password" id="pass" name="password" minlength="8" required >

输出:

在上面的示例中,我们演示了密码字段的用法。我们还在此处指定了必填字段,这意味着必须输入密码。此外,我们还在此处提到了 minlength 字段,它建议将接受的密码的最小长度。 但是,在“password”输入类型中添加“required”或“minlength”字段是可选的。

支持的通用属性:密码字段支持的常见属性有:autocomplete、inputmode、maxlength、minlength、pattern、placeholder、readonly、required 和 size。

输入类型“提交”

submit类型的输入元素定义一个按钮,用于将表单数据提交到表单处理程序。基本上,表单处理程序是一段代码,它在服务器上运行以处理我们提供给表单的数据(输入数据)。

当用户代理收到单击事件(通常在单击按钮后)时,它会将表单提交到服务器。

type="submit" value="Submit data">

表单处理程序在表单的action属性中指定:

 
action="/action_page.php">
type="text" id="name" name="name">

type="password" id="pswd" name="password" required>

type="submit">

输出:

在这里,在提交表单时,它将重定向到表单的action属性中指定的页面。并且,输入的数据将在单击提交按钮后发送到服务器。

如果是输入类型submit,如果省略了 value属性,则该按钮将具有默认文本“Submit”。

输入类型“重置”

reset类型的元素是一种按钮,单击这些按钮后,它会将表单中的所有输入重置为其初始值。

<input type="reset"> //Resets the input to initial values

例:

<form>
      <label for="example">Type in some sample text: label>
      <br>
      <input id="example" type="text"> <br><br>
      <input type="reset" value="Reset the form">
form>

输出:

注意:如果从输入中省略value属性,则会获得一个带有默认标签“重置”的按钮。

输入类型“Radio”

单选元素通常用作描述一组相关选项的单选按钮的集合。一次只能选择给定组中的一个单选按钮。单选按钮通常呈现为小圆圈,选中时会填充或突出显示这些圆圈。

<input type="radio"> // allows user to select only ONE out of a number of choices

例:

    

Which is your preferred OS?

type="radio" id="linux" name="os" value="Linux" />
type="radio" id="mac" name="os" value="Mac" />
type="radio" id="windows" name="os" value="Windows" />

输出:

因此,在这里我们可以从提供给我们的多个选项中选择一个值。

输入类型“复选框”

默认情况下,复选框类型的元素呈现为框,单击时会选中(勾选)这些框。复选框允许您选择零个或多个值以在表单中提交。

<input type="checkBox">  //select ZERO or MORE options from a set of choices.

例:

    

Your favoured piza toppings?

type="checkbox" id="pep" name="topping1" value="Pepperoni">
type="checkbox" id="mushroom" name="topping2" value="Mushroom" />
type="checkbox" id="olives" name="topping3" value="Black olives" >
type="checkbox" id="Sausage" name="topping4" value="Sausage" />
type="checkbox" id="cheese" name="topping5" value="Extra cheese">

输出:

如示例所示,我们可以从复选框中选择任意数量的值。

value 属性不会显示在客户端,但在服务器上,这是为使用复选框名称提交的数据提供的值。例如,在此示例中,我们有一个名称 topping1和一个值 Pepperoni。提交表单时,数据名称/值对将与所选的其他值一起为topping1=Pepperoni。 如果省略了 value 属性,则复选框的默认值为on,因此在这种情况下提交的数据将为topping1=on

注意:复选框类似于单选按钮,但有一个重要的区别:单选按钮设计用于从集合中选择一个值,而复选框允许您从给定集合中选择 0 到多个选项。

输入类型“按钮”

按钮类型的元素呈现为简单的按钮。我们可以对它们进行编码,以控制我们想要的任何功能,在我们网页上的任何位置,例如我们执行某些活动时的任何动画或颜色变化。

例如,您必须使用事件处理程序,这些处理程序用于处理任何事件。事件可以是任何内容,例如单击按钮,或将鼠标悬停在按钮上,或者当我们对它们执行任何操作时响应的任何内容(假设链接在我们单击后更改了颜色)。因此,这可以通过为按钮提供事件处理函数(处理事件的函数)来完成。使用它们,我们可以定义 onClick()、onHover()、onDoubleClick() 等函数来响应按钮中用户的操作/事件。

<input type="button"> //A push button with no default behavior.

例:

 <form>
      <input type="button" value="Click Me"> <br/><br/>
      <input type="button" onclick="alert('I'm not given a value!')" > <br/> 
      <input type="button" value="Disabled button" disabled>
form>

输出:

单击“Click Me”时的结果:

虽然 button 类型的 元素仍然是完全有效的 HTML,但较新的元素现在是创建按钮的首选方式。鉴于在开始和结束标签之间插入了的标签文本,您可以在标签中包含 HTML,甚至可以包含图像,因此这是一种更优选的方式。

输入类型“颜色”

颜色类型的元素提供了一个 UI 元素,用户可以使用可视颜色选取器或将颜色输入到十六进制格式的文本字段中#rrggbb从而指定颜色。

<input type="color"> //used for input fields that should contain a color.

例:

Choose your favourite color

type="color" id="one" name="one" value="#e12345">
type="color" id="two" name="two" value="#f6b73c">
type="color" id="three" name="three" value="#g6523c">

输出:

如果未指定值,则默认值为 #000000(黑色)。 在设置值之前,必须将任何其他格式的颜色(如 CSS 颜色名称或 CSS 颜色函数,如 rgb() 或 rgba())转换为十六进制。例如,在设置任何值之前,必须将 RGB 红色代码- (255,0,0) 转换为十六进制:十六进制代码 RGB- FF0000。

输入类型“日期”

type=“date” 的元素创建允许用户输入日期的输入字段,可以使用验证输入的文本框或特殊的日期选取器接口。

<input type="date" value="2017-06-01"> //used for input fields that should contain a date.

例:

    
type="date" id="bday" name="birthay" value="2021-12-10" min="1990-01-01" max="2022-01-01" >

输出:

日期的格式符合ISO 8601标准。我们还支持 date 的 max、min 和 step 属性,以向日期添加所需的限制。

ISO 8601日期格式如下:YYYY-MM-DDTHH:mm。sssZ。这些字符表示以下数据: YYYY – 当前年份,以四位数字表示(例如 2021 年)

输入类型“Datetime-local”

datetime-local 类型的元素创建输入字段类型,使用户能够轻松输入日期和时间,包括年、月和日以及以小时和分钟为单位的时间。

<input type="datetime-local"> //specifies a date and time input field

例:

type="datetime-local" id="journey-time" name="journey-time" value="2021-12-10T19:30" min="2021-12-10T20:30" max="2021-12-20T00:00" />

输出:

这里的 value、min 和 max date 属性是可选的,如果省略,它将以 - 格式显示

值得注意的几点 -

输入类型“电子邮件”

电子邮件类型的元素用于允许用户输入和编辑电子邮件地址。如果指定了 multiple 属性,则也接受电子邮件地址列表。 在提交表单之前,会检查输入值是否为空,或者它是否是格式正确的电子邮件地址(或电子邮件地址列表)。

<input type="email"> //for fields that should contain an e-mail address.

例:

type="email" id="email" pattern=".+@gmail\.com" size="30" placeholder="abc123@gmail.com" required />

输出:

在这里,一件有趣的事情是,如果我们不提供电子邮件,表单将自动失效,因为我们已将“类型”字段指定为电子邮件。

例如,如果我们不提供“@”

同样,在上面的代码中,我们可以看到我们提供了一个模式,它是 ==pattern=“.+@gmail.com== ”,因此如果我们提供任何没有 gmail.com 的电子邮件地址,它将不会被接受。

例如

我们还可以通过添加多个属性来提供电子邮件地址列表(在这种情况下,即使输入 0 电子邮件地址也是可以接受的)。

输入类型“文件”

具有 type=“file” 的元素允许用户从其设备存储中选择一个或多个文件。选择后,可以使用表单提交将文件上传到服务器。我们还可以在 JavaScript 代码中使用该文件,并使用文件 API 进行操作。

<input type="file"> //To upload files from local system

例:


      ="dp">

Upload profile picture:

type
="file" id="dp" name="avatar" accept="image/png, image/jpeg" />

输出:

accept属性值是一个字符串,用于定义文件输入应接受的文件类型。我们还有capture属性,它指定使用哪个相机来捕获图像或视频数据。当我们要上传多个文件时,会指定“multiple”属性。

输入类型“隐藏”

隐藏类型的元素允许 Web 开发人员包含用户在提交表单时无法查看或修改的数据。例如,我们绝不希望在提交任何表单时将用户 ID显示在 URL 中。因此,隐藏的输入在呈现的页面中是完全不可见的。

<input type="hidden"> //a field not visible to the user

例:

type="text" id="username" name="username" />

type="hidden" id="userID" name="userID" value="5591" /> type="submit" value="Submit" />

输出:

在这里,用户 ID 将与表单一起隐藏,并且在页面内容中的任何位置都不可见。

输入类型“月”

类型为 month 的元素创建允许用户输入月份和年份的输入字段。字符串值的格式为“YYYY-MM”,其中YYYY是四位数的年份,MM是月份数。

<input type="month"> //to select a month and year.

例:

type="month" id="start" name="start" min="2021-06" max="2025-06" value="2021-06 " />

输出:

因此,根据浏览器支持,我们将在此处提供日期选择器。

输入类型“数字”

number 类型的元素允许用户输入数字。它们包括内置验证。他们拒绝任何非数字条目。我们还可以有一个附加的步进器来增加或减少点击它的计数。

<input type="number"> //To enter numerical inputs

例:

 
type="number" id="burgers" name="burgers" min="1" max="15" />

输出:

此外,Number 支持的其他属性包括 -- min、max、readOnly、placeholder、step 和 list。

输入类型“范围”

用户可以使用range类型的元素指定一个数值,该数值不得小于指定值且不得大于另一个值。不需要精确值。通常,根据浏览器支持,它使用滑块或拨盘控件表示。

<input type="range"> //A slider control to provide value in ranges

例:

type="range" id="Brightness" name="Brightness" min="0" max="100">
type="range" id="Volume" name="Volume" min="0" max="100">

输出:

默认值介于指定的最小值和最大值之间,但如果最小值大于最大值,则默认值设置为 min 属性的值。Range 还具有 step 属性。

输入类型“搜索”

类型搜索元素允许用户输入其搜索查询。

<input type="search"> //To enter search queries

**EXAMPLE:** 

type="search" id="site-search" name="query" aria-label="Search people places, sites:" />

输出:

搜索支持的属性包括 --自动完成、列表、最大长度、最小长度、模式、占位符、必需和大小。

输入类型“电话”

类型为 tel 的元素用于允许用户输入和编辑电话号码。但是,由于世界各地的电话号码各不相同,因此此处没有表单验证。在手机中,它们带有用于输入电话号码的定制键盘。

<input type="tel"> //To enter telephone numbers

例:

type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890" required />

输出:

在上面的示例中,我们为电话号码提供了一个模式,该模式表明 - [0-9] 之间应该有 {3} 位数字,[0-9] 之间应该有另外 {3} 位数字,然后是 [0-9] 之间的 {4} 位数字。我们提供了“占位符”以便清晰理解。 此 tel 输入类型支持的其他属性包括 -autocomplete、list、maxlength、minlength、pattern、placeholder、readonly和size。

输入类型“时间”

类型为 time 的元素创建输入字段,允许用户轻松输入特定时间(小时和分钟,以及可选的秒)。UI 因浏览器而异。

<input type="time"> //Enter time in hours, mins& secs

例:

type="time" id="appointment" name="appt" min="09:00" max="22:00" required>

输出:

在 Chrome/Opera 浏览器中,时间控件具有以 12 或 24 小时格式输入小时和分钟的时间槽。

输入类型“url”

url 类型的 元素允许用户输入和编辑任何 URL。

<input type="url"> //Enter the url

例:

<form>
      <label for="url">Enter your website's URL: <br />label>
      <input
        type="url"
        name="url"
        id="url"
        placeholder="https://abc.com"
        pattern="https://.*"
        size="35"
        required
      />
    form>

输出:

它包含内置验证,以确保在提交表单之前输入的 URL 是否正确。如果我们输入的 URL 不符合预期的模式pattern=“*”,则会引发错误。 此 URL 字段通常支持的属性包括 -自动完成、列表、最大长度、最小长度、模式、占位符、只读、必需和大小。

输入类型“周”

类型为 week 的元素创建输入字段,允许用户轻松输入年份和该年份的 ISO 8601 周数。

 type="week"> 

例:

type="week" name="week" id="holiday-week" min="2021-W44" max="2021-W52" required />

输出:

我们还可以使用 value 属性指定默认周。其他支持的属性包括 - 自动完成、列表、只读和步骤。

结论

在这里,我们来到了本教程的结尾。它为您提供了对 HTML 表单中各种输入的详细了解以及相关的相关示例。让我们总结一下我们在整个过程中学到的东西——

Vue项目中element-ui 上传文件upload与form一起提交

需求:提交表单数据和上传文件同步进行,请求一次接口。

elementui中的upload组件上传文件时能附带额外的参数,所以可以把表单数据作为上传时附带的额外参数提交给后台。

JavaScript
<el-dialog
      class="add_box"
      :title="title"
      :visible.sync="editFormVisible"
      width="25%"
      style="min-width:1100px;"
      @click="closeDialog"
    >
	<el-form
        label-width="80px"
        :model="editForm"
        :rules="rules"
        ref="editForm"
      >
        <el-form-item label="教材名称" prop="lname">
          <el-input
            size="mini"
            v-model="editForm.lname"
            auto-complete="on"
            placeholder="请输入教材名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="上传" prop="files">
          <el-upload
            ref="uploads"
            :auto-upload="false" //关闭自动上传
            class="upload-demo"
            action="http://101.205.19.108:8294/MCService/action/addmaterial" //上传文件的地址
            :data="editForm"   //表单数据作为上传时附带的额外参数
            :on-success="upFile" //成功会执行此函数
            multiple
            :limit="2"
            name="files"
            :on-exceed="handleExceed"
            :file-list="fileList"
            accept=".doc,.docx,.xslx,pdf,.ppt" //限制上传文件的类型
          >
            <el-button size="mini" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="submitForm('editForm')"
          >保存</el-button
        >
      </div>
  </el-dialog>

js代码

JavaScript
<script>
import {
  addmaterial,
  updatematerial,
  getmaterials_by_cid_mid,
  get_materials_page,
  getall_citys,
  getall_mtypes,
} from "../../api/api";
export default {
  components: {},
  data() {
    return {
      editForm: {
        cid: "",
        mid: "",
        lname: "",
        memo: "",
      },
      //上传文件
      fileList: [],
    };
  },
  methods: {
    // 编辑、增加页面保存方法
    submitForm(editData) {
      this.$refs[editData].validate(async (valid) => {
        if (valid) {
          console.log(this.editForm);
            this.$msgbox
              .confirm("确定保存?", "提示信息", {
                cancelButtonText: "取消",
                confirmButtonText: "确定",
                type: "warning",
              })
              .then(() => {
              //进行文件上传
                this.$refs.uploads.submit();
          }
        } else {
          return false;
        }
      });
    },
    /* 上传文件操作 */
    upFile(res, file) {
      console.log(res);
      if (res.status == 200) {
        // 文件上传成功后的回调,比如一些提示信息或者页面跳转都写在这里
        this.$message.success(res.info);
      } else {
        this.$message.error(res.info);
        let _this = this;
        setTimeout(function() {
          _this.$refs.uploads.clearFiles();
        }, 1000);
      }
    },
  },
};
</script>

这样就可以添加文件的同时也提交表单了。

本站内容来自用户投稿,如果侵犯了您的权利,请与我们联系删除。联系邮箱:835971066@qq.com

本文链接:http://news.xiuzhanwang.com/post/2931.html

发表评论

评论列表

还没有评论,快来说点什么吧~

友情链接: