武汉网站营销优化源码下载百度 安装
目录
一、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元素用于定义菜单项