HTML中的＜form＞表单及其元素

目录

一、form表单

基本属性

二、元素

HTML 表单是网页与用户交互的核心工具，允许用户输入数据并提交到服务器。

一、form表单

form表单是数据提交的容器，包裹所有表单元素的容器，定义了数据提交的目标地址和提交方式。form元素用于创建用户输入的表单，本文讲介绍form表单的属性及其元素。

基本属性

菜鸟教程form

<template>
  <div>
    <form action="src/views/system/measurement/v1.vue"  method="get" >
      证件： <input type="file" name="pic"  accept="image/*"><br>
      姓名： <input type="text" name="name" value="Mouse"><br>
      <input type="submit" value="提交">
    </form>
  </div>

</template>

效果图如下：

• action: 指定表单数据提交到的URL。如果未指定，则数据将提交到当前页面。

  <form action="submit.vue">

• method: 指定提交表单数据的HTTP方法（GET或POST）。GET方法会将表单数据附加到URL，而POST方法会将数据作为HTTP请求的主体发送。

  <form method="post">

• name: 为表单指定一个名称，以便在JavaScript中引用。

  <form name="myForm">

• target: 指定在何处打开提交表单后的响应。可以是_self（默认，在当前窗口/框架中打开），_blank（在新窗口或标签页中打开），_parent（在父框架集中打开），或_top（在整个窗口中打开）。

  <form target="_blank">

• enctype: 指定在发送表单数据之前如何对其进行编码（仅适用于method="post"）。常见值包括application/x-www-form-urlencoded（默认）、multipart/form-data（用于文件上传）、text/plain。

  <form enctype="multipart/form-data">

• autocomplete: 指定浏览器是否应自动完成表单字段。可以是on或off。

  <form autocomplete="off">

• novalidate: 指定在提交表单时不应进行HTML5验证。

  <form novalidate>

表单元素属性，表单内部可以包含多种输入控件input、label、textarea、select、option、fieldset、button、optgroup

二、元素

1、input

<input>元素是最常用的表单控件，根据type属性的不同，它可以表示不同的输入类型。（input的工作方式相当程度上取决于type属性值，如果未指定采用默认类型为text）

type属性

<template>
  <div style="margin-left: 10%; margin-top: 10%">
    <form action="src/views/system/measurement/v1.vue"  method="get" enctype="" novalidate>
      证件： <input type="file" name="pic"  accept="image/*"><br>
      姓名： <input type="text" name="name" value="Mouse"><br>
      颜色： <input type="color" ><br>
      image： <input type="file" alt="image" ><br>
<!--      选项，单选靠name分类，同一类只能选一个-->
      选项1： <input type="radio" name="v1" ><br>
      选项2： <input type="radio" name="v1" ><br>
      选项3： <input type="radio" name="v1" ><br>
      ----------------------------------------------------<br>
      选项1： <input type="radio" name="v2" ><br>
      选项1： <input type="radio" name="v3" ><br>
      <input type="submit" value="提交">
    </form>
  </div>

</template>

显示效果如下：

2、label

label标签为输入控件提供文字描述，增强表单的可访问性和交互性。label与input绑定，通过label的for值和input的id一致

<template>
  <div style="margin-left: 10%; margin-top: 10%">
    <form action="src/views/system/measurement/v1.vue"  method="get" enctype="" novalidate>
      <form action="/register" method="POST">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" required><br><br>

        <label for="pwd">密码：</label>
        <input type="password" id="pwd" name="password" required><br><br>
<!--        单选靠name分类，同类只能选一个（单选）-->
          <label>性别：
            <input type="radio" name="gender" value="male" checked> 男
          </label>
          <label>
            <input type="radio" name="gender" value="female"> 女
          </label><br><br>
        <input type="submit" value="注册">
      </form>
    </form>
  </div>

</template>

显示效果如下：

3、textarea

textarea元素用于创建多行文本，可容纳无限量的文本，

元素属性

<template>
  <div style="margin-left: 10%; margin-top: 10%">
    <form action="src/views/system/measurement/v1.vue"  method="get" enctype="" novalidate>
      <form action="/register" method="POST">
        文本框：
        <textarea >文本框</textarea><br>
        message：<textarea name="message"></textarea><br>
        rows=4：<textarea rows="4"></textarea><br>
        cols=50：<textarea cols="50"></textarea><br>
<!--        提示语-->
        提示语：<textarea placeholder="请输入您的消息..."></textarea><br>
<!--        只读-->
        只读：<textarea readonly></textarea><br>
<!--        禁用文本区域-->
        禁用：<textarea disabled></textarea><br>

      </form>
    </form>
  </div>

</template>

效果图如下：

4、select

select元素用于创建下拉菜单

5、option

option元素用于定义菜单项

6、fieldset

7、button

8、optgroup