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小時內與您取得聯系。

整合營銷服務商