HTML的表单标签

TML:完成页面的内容展示

CSS：完成页面样式的控制，美化页面，完成页面的布局。

表单：用于采集用户输入的数据。用于和服务器进行交互。

form:用于定义表单的。可以定义一个范围(代表用户采集数据的范围)

属性：action:指定提交数据的url(指的就是把数据提交到哪里)

method:指定提交方式

分类：一共有7种，2种比较常用。

get:1.请求参数会在地址栏显示

2.请求参数的长度是有限制的。

3.请求不安全

post:1.请求参数不会在地址栏显示，会封装在请求体中。

2.请求参数的长度没有限制

3.较为安全

表单里面的数据要想被提交，必须指定它的name属性

表单项标签

input:可以通过type属性值，改变元素展示的样式。

type属性：text:文本输入框，默认值

placeholder:指定输入框的提示信息，当输入框的内容发生变化，会自动情况提示信息。

password:密码输入框

radio：1.单选框(要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样)

2.一般会给每一个单选框提供value属性，指定其被选中后提交的值。

3.checked属性可以指定默认值

checkbox:复选框:

1.一般会给每一个单选框提供value属性，指定其被选中后提交的值。

2.checked属性可以指定默认值

file:文件选择框

hidden:隐藏域，用于提交一些信息

按钮:

submit:提交按钮。可以提交表单

button:普通按钮

image:图片提交按钮

src属性指定图片的路径

label:指定输入项的文字描述信息

注意：lable的for属性一般会和input的id属性值对应。如果对应了，点击lable区域，会让input输入框获取焦点。

select:下拉列表

子元素：option,指定列表项

textarea:文本域

ue3从2020年9月发布到现在也有3年多的时间，这期间相信各大企业先后陆续都会在新项目的选择上从Vue2转到了Vue3开发，原因毫无疑问两个方面的改变性能+组合式API的变化，性能提升暂且不谈后续有空我会单独说一下性能方面的，也并非讲组合式API的用法好处，本文重点要讨论的一个地方是关于<script setup>用法问题。 <script setup> 是什么? 有什么用? 在vue的官网中是这么写的

添加图片注释，不超过 140 字（可选）

网中写了这样的一个示例（官网中主要展示的是组合式API与Option API的区别）

<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
    count.value++
}

// 生命周期钩子
onMounted(() => {
    console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
    <button @click="increment">Count is: {{ count }}</button>
</template>

其中第一行代码的setup就是一个语法糖的使用，那么如果没有加入setup关键字的话应该如何写呢?

<script>
import { ref, onMounted } from 'vue'

export default {
    setup () {
        // 响应式状态
        const count = ref(0)

        // 用来修改状态、触发更新的函数
        function increment() {
            count.value++
        }

        // 生命周期钩子
        onMounted(() => {
            console.log(`The initial count is ${count.value}.`)
        })
        
        return {
            count
        }
    }
}
</script>

<template>
    <button @click="increment">Count is: {{ count }}</button>
</template>

看起来是不是前者简便了一些，少写了export default也不再需要在setup方法中return，一共8行代码，随着<template>模板中的变量越多代return出去的代码也会越多，通常一个业务组件中大约是10~30行代码 <script setup>的得与失使用setup标识的好处如前面所说，节约代码，不需要在setup方法内使用return返回变量即可在template中直接使用作为<script setup>使用的代价失去了什么？在讲这方面之前我认为有必要先，抛出一个观点，是否越越简洁的代码就越好？显然我是不这么认为的，关于这点不仅仅体现在这一方面，后期可以单独针对这一点再举个例子讲一下，当前只针对setup单独讨论，在讨论这个问题之前我们需要对一下几个概念有一个清晰的认识。通常我们在Vue中使用引入局部组件？

<script>
import componentA from '组件路径'

export default {
    components: {
        // 完成注册
        componentA
    }
}
</script>

<template>
    <div>
        <!--完成使用-->
        <componentA></componentA>
    </div>
</template>

想必这几行代码使用，早已深深刻入每一个使用Vue开发的人的DNA了。不知大家是否有想过尝试过通过console.log(componentA)在控制台输出一下componentA组件的本质是何物，或者他应该是何物？我想了解这一点是比较重要的，或许他不影响着我们开发，直接按固定的套路import接收一个固定的变量，固定的写法，就能实现组件注册并实现业务逻辑开发，但作为一个开发人员，如果连每天都在使用的东西都不了解，我觉得多少都是有些问题的。关于这一点实际上就跟Vue本身没多大关系的，这涉及到的实际上就是模块化方法的知识。 js的ES6模块化的一些概念关于模块化的作用在这里不做过多的叙述，直接说最终使用上的一个规则，网上可能有各种各样的说法，这里我得到叫法可能跟网上有所不同，但语法规则上是一样的，大家可以自行去网上了解。导出

// 非默认导出,他可以有多个,不可匿名
export const a = 'a'
export const b = 'b'
// 默认导出，可以匿名
export default ‘c’

导入

// 导入非默认导出变量，导出的变量名必须跟导出相同
import { a } from '导出文件地址'
// 导入默认导出变量,默认导出变量名可以自定义，因为导出是匿名
import ccccc from '导出文件地址'
// 全量导入,会将默认导出与非默认导出一起合成一个大对象返回，如果是默认导出，那么key值就是default
import * as all from '导出文件地址'

console.log(a)
// 输出 'a'
console.log(ccccc)
// 输出 'c'
console.log(all)
// 输出对象 { a: 'a', b: 'b': default: 'c' }

Vue中import导入的组件变量componentA到底是什么

回到最开始的时候写的案例组件，如下

<script>
import { ref, onMounted } from 'vue'

export default {
    setup () {
        // 响应式状态
        const count = ref(0)

        // 用来修改状态、触发更新的函数
        function increment() {
            count.value++
        }

        // 生命周期钩子
        onMounted(() => {
            console.log(`The initial count is ${count.value}.`)
        })
        
        return {
            count
        }
    }
}
</script>

<template>
    <button @click="increment">Count is: {{ count }}</button>
</template>

很显然componentA就是<script>里面的export default所导出的整个对象，到此也解释了为何我不推荐写<script setup>，因为本应该能能基于我们更好理解性质的代码被直接忽略了，这是由于通常我们使用vue-cli开发，内部集成了webpack里面的其中一个loader,也就是vue-loader帮我们处理了这些事情。老好人vue-loader 使用脚手架开发时候，我们不难发现在package.json里面需要依赖vue-loader。什么？你说没有？那是因为官方提供的脚手架实际上不是直接依赖vue-loader，而是依赖了@vue/cli-service然后再这个包内部又依赖了vue-loader，去node_modules内部找到这个包查看引用不难发现这点。那么vue-loader帮我们做了什么？ js模块化的局限性及解决办法我们所熟悉的模块化实际上只支持两种文件js,json而.vue文件实际不难理解，因为他并不是纯js代码。那么import导入时候肯定是不知道导出的变量是啥，哪怕之前所说的componentA实际上export default这些代码也是在.vue文件内的一个<script>内部的代码，我们所熟悉的能直接这么写的文件恐怕只有.html文件，在浏览器的时候他认识这个标签。但.vue凭什么理所应当就认识?里面还有<template>作为类html的模板以及<style>作为容纳css的标签，从我们最开始理解的前端三剑客html,css,js，这似乎是一件不被理解的事情。因此vue-loader实际上就相当于是认识这个.vue的翻译官，它的作用就是将.vue文件转换成.js文件，这样就能解决了模块导入的局限性。 vue-loader针对.vue文件做了多少处理关系这点还是挺多细节的，在这里不做过多解释，有机会可以单独写一篇讲一下，这里只做简单解释，就是将<template>转换成导出的对象中的render方法，将<style>转换成js语法,比如通过document.createElement创建<style>标签，再通过document.body.appendChild插入到dom中,这样一来不就是纯js代码了。那么回归到最初的问题，很显然 <script setup>就是在这个过程中做了一些代码的节约,从而让我们可以少写了这几行代码。可以简单的理解为，我们不用亲自写这些代码。但是vue-loader在编译之后还是给我们加上了这些代码，这其中也包括了return出去的变量,所以才可以直接在模板中使用。总结使用<script setup>代价到底失去了什么

<script>
import { ref, onMounted } from 'vue'

export const defaultOptions = {
    count: '0'
}

export default {
    setup () {
        // 响应式状态
        const option = ref(defaultOptions)
        
        return {
            option
        }
    }
}
</script>

<template>
    <div>{{ option.count }}</div>
</template>

如上述这类代码除了export default以外还可以使用非默认导出export导出变量defaultOptions，当然这点几乎无关痛痒，也并非是我不推荐的原因。最主要的原因是，经过上述的说法，如果对于js 模块化有足够的理解，那么我认为从代码阅读性质来说无疑是更好的，因为vue-loader将这一部分不该做的事情都做了，回想Vue2实际这些代码都是不可忽略的，但反而因为如此，他能更接近js本质上的一些东西，我认为是不可忽略的。其中return返回的变量，我认为其实从某种角度上，更能直观让你看到<template>上到底使用了那些变量，方法，计算属性等。总结 使用<script setup>弊大于利 而对于相对于少这一点点代码来说实际上，我认为实际上并不占用项目太多的代码量，但会换来更好的代码阅读性。

单的作用：用来收集用户的信息。

提示信息：说明性的文字，用于提示用户进行填写和操作。

表单控件：包含了具体的表单功能项，如文本框、密码框、单选框、复选框、提交按钮、重置按钮等。

表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义处理表单数据提交的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

input 控件(重点)

<input />标签为单标签，type属性为input标签最基本的属性，取值有多种，用于指定不同的标签类型。除了type属性之外，<input />标签还可以定义很多其他的属性：

文本框 <input type="text" value="默认值"/>
密码框 <input type="password" />

单选按钮组 
	<input type=“radio” name=“ral” />男 
	<input type=“radio” name=“ral” checked=“checked”/>(默认选中)女
<!--*disabled="disabled" (禁用) *  checked="checked"   (默认选中)-->

复选框组 
<input type="checkbox" name="" /> 
<input type="checkbox" name="" disabled="disabled" />

按钮组：
空按钮 <input type="button" value="按钮内容" />
提交按钮 <input type="submit" value="按钮内容" />
重置按钮 <input type="reset" value="按钮内容" />
图片按钮 <input type="image" src='bg.png' />
文件按钮 <input type="file" />

lable 标签

label 标签为 input 元素定义标注。

作用
用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素会获得焦点。
for 属性规定 label 与哪个表单元素绑定。
方法 1：label包裹

<label>

</label>

方法 2：for 指定

textarea（文本域）

如果需要输入大量的信息，则需要用到<textarea></textarea>标签。textarea控件可以创建多行文本输入框，语法：

<textarea cols="每行中显示的字符数" rows="显示的行数">
  文本信息
</textarea>

下拉菜单

<select>
  <option>选项1</option>
  <option selected>选项2</option>
  <option>选项3</option>
  ...
</select>

注意
(1) <select></select>中至少应包含一对<option></option>。
(2) 在option 中定义selected =" selected "时，当前项即为默认选中项。
示例

表单域

关于表单的第一节课，我们讲过表单由三部分组成：表单控件（input控件，select、textarea、button）、提示信息、表单域。

在HTML中，form标签用于定义表单域，即创建一个表单，用来收集和传递用户的输入信息，指定提交到的服务器，以及提交方式。

语法
<form action="url地址" method="提交方法" name="表单名称"> 用户名：<input type="text" /><br /> 密码：<input type="password" maxlength="6" /><br /> <input type="submit" /> <input type="reset" /> </form>
说明
（1）Action：用于指定接收并处理表单数据的服务器的url地址
（2）method：用于设置表单数据的提交方式，get或post
（3）name：指定表单的名称，用于区分同一个页面中的其他表单
注意
每个表单都应该有自己表单域

在线咨询

上一篇：WPF 按钮添加 UAC 盾牌图标
下一篇：技术贴：一篇文章看懂链接（超链接）设计

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商