整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
站開發(fā)入門指南：表單相關(guān)標(biāo)簽們。
接下來我們來學(xué)習(xí)一下表單以及相關(guān)的元素。
·表單其實(shí)英文是叫做fo.rm，在我們平時(shí)使用的這種互聯(lián)網(wǎng)產(chǎn)品中包括網(wǎng)站也好、app也好，經(jīng)常會(huì)看到這種需要你去填一些資料、填一些文字、填一些數(shù)據(jù)的這樣一種頁(yè)面。像這種頁(yè)面其實(shí)都是通過表單以及表單的元素去構(gòu)成、去實(shí)現(xiàn)的。
也就是說表單其實(shí)是用來收集用戶數(shù)據(jù)的，它是給用戶去輸入一些數(shù)據(jù)的。而且輸入完之后，一般它是要跟服務(wù)器去發(fā)生一些交互的。就是比如說把數(shù)據(jù)發(fā)送到服務(wù)器或者在本地處理過后，再給到服務(wù)器去進(jìn)一步的處理或者去保存。所以其實(shí)表單這些元素，如果真正要去用起來的話，真正要讓它功能跑起來的話，其實(shí)很多時(shí)候是要跟js打交道的。所以目前來說只要簡(jiǎn)單的去了解一下表單的元素的基本使用就可以了。
·然后后面學(xué)了CSS之后，你也知道怎么去給這些表單做它的樣式就OK了。那我們看一下表單以及相關(guān)的元素有哪些？表單主要是有一個(gè)這樣一個(gè)表單本身的標(biāo)簽，另外這些就是跟它相關(guān)的一些標(biāo)簽元素了。這些元素一般都是放在這個(gè)for.m元素里面的嵌套在它里面的。
但是表單的元素，它跟我們之前學(xué)過的ul li-olli一定要進(jìn)行嵌套使用的，這種元素還不太一樣。表單中的元素，像這個(gè)和這個(gè)是經(jīng)常可以單獨(dú)使用的，也就是說不用嵌套在這個(gè)form表單里面也是可以用的。所以要明白這些表單內(nèi)的元素，如果你有需要是完全可以去獨(dú)立的去使用它的，并不一定要跟這個(gè)for.m.搭.配起來嵌套在它里面的。
·很多時(shí)候去使用form這樣的標(biāo)簽。然后把這些表單的元素嵌套在里面。它其實(shí)主要的一個(gè)目的，它是為了讓這些就是收集到的數(shù)據(jù)組成一種結(jié)構(gòu)化的一種模式，結(jié)構(gòu)化的一種狀態(tài)。這樣發(fā)送到服務(wù)器，服務(wù)器也可以通過這種更好的結(jié)構(gòu)去讀取數(shù)據(jù)。
所以目前的學(xué)習(xí)階段來講是沒有辦法給你去展示表單的作用。但是等你學(xué)到JS之后，你在有了這些基礎(chǔ)知識(shí)之后，就能通過JS其實(shí)非常清晰看到它的整個(gè)數(shù)據(jù)結(jié)構(gòu)。這節(jié)課主要是來講一講這個(gè)標(biāo)簽，這個(gè)標(biāo)簽其實(shí)會(huì)經(jīng)常單獨(dú)的來進(jìn)行使用。這個(gè)標(biāo)簽之前也簡(jiǎn)單的給大家去演示過，它是一個(gè)用來做這種文字輸入的標(biāo)簽。
很多時(shí)候，像這種真實(shí)的產(chǎn)品頁(yè)面，產(chǎn)品里面會(huì)發(fā)現(xiàn)很多的輸入欄都是用這個(gè)標(biāo)簽去實(shí)現(xiàn)。打開開發(fā)者工具之后，可以看到這里有一個(gè)這樣的小工具，選用它之后就可以去快速的定位到元素。可以看到它這邊有個(gè)input，選中之后，元素列表這里也能看到就是input這樣的元素。所以很多的頁(yè)面上的輸入框其實(shí)都是用input元素來實(shí)現(xiàn)的。
input非常重要的屬性叫做type，type屬性之前演示過一個(gè)叫text(的值)，一個(gè)叫Checkbox，給大家演示過。這兩個(gè)設(shè)置之后是會(huì)產(chǎn)生不同的效果。這種能設(shè)置的屬性的值非常多，我這里不給大家去做演示，你有興趣自己可以去嘗試去使用一下。
這里主要是介紹一個(gè)是這個(gè)之前講過的，給大家簡(jiǎn)單也再看一下。一個(gè)是checkbox，一個(gè)是checkbox，還有一個(gè)file，其他的。
還有pasisword也給大家看一下。這里來看一下。首先看到input非常簡(jiǎn)單，直接默認(rèn)的text它這邊，這邊先把它放大一點(diǎn)，放五倍大，大家看起來清楚一點(diǎn)。這樣就可以在這里輸入這樣一個(gè)內(nèi)容了，非常簡(jiǎn)單。
然后比如這里改成password，然后這邊輸入的東西自動(dòng)的就變成這種小圓點(diǎn)了，就相當(dāng)于是一種幫你保密，就是防止別人偷看到你的密碼。然后就是checkbox(多選框)。之前簡(jiǎn)簡(jiǎn)單演示過了checkbox會(huì)變成這種勾選的框，它有一個(gè)屬性，如果你使用的checkbooks這樣的類型，你可以使用這個(gè)checked這樣的屬性，就讓元素默認(rèn)是打勾(選中)的狀態(tài)。
像這種東西其他的前面一般都會(huì)有一個(gè)文字，告訴你這個(gè)選項(xiàng)是什么，然后這里把這個(gè)改一下，就叫做選擇。想學(xué)習(xí)的語(yǔ)言其實(shí)一定是可以多選的。這里來一個(gè)寫一個(gè)span，叫做js好html，然后自己再多復(fù)制幾個(gè)，然后這里變成CSS，變成javascript。像這種前面這種文字用span都是沒有任何問題的。
但是其實(shí)在表單元素里面有一個(gè)標(biāo)簽叫做lab.el。label其實(shí)一般用來寫這種，就是告訴這個(gè)選項(xiàng)是什么樣的一個(gè)選項(xiàng)，這樣的一些文字。label有個(gè)特殊的作用，比如說把這個(gè)換成label，label之后這里有一個(gè)屬性叫做for，for可以去跟比如說input，這里設(shè)計(jì)一個(gè)id叫做html。
稍微跟寫的不一樣，這個(gè)其實(shí)寫一樣也沒有關(guān)系，但是這里寫不一樣，大家可能更容易理解一點(diǎn)。
把名字id名跟這個(gè)對(duì)應(yīng)上之后for里面是某個(gè)元素的id值，就是input這樣的一個(gè)元素的id值，label就跟input元素綁定了。注意這里寫錯(cuò)了label。
·然后看一下可以點(diǎn)擊文字，就相當(dāng)于點(diǎn)擊了選項(xiàng)框，其他的用spam包裹的文字是沒有綁定的效果。所以label標(biāo)簽的作用就是有這樣的一個(gè)文字跟相應(yīng)的元素綁定起來。點(diǎn)擊文字相當(dāng)于就點(diǎn)擊元素這樣的效果。
·然后可以看一下另外一種叫radio這種單選框的元素，也是用input來實(shí)現(xiàn)的。然后來看一下input，把它設(shè)置成radio的類型就會(huì)變成這樣一個(gè)圓點(diǎn)。假如還是按照這種模式，比如說這里把ID也設(shè)置一下叫做htmltag，其實(shí)跟htmltag類型的數(shù)據(jù)庫(kù)也是一樣的。如果設(shè)置checked就默認(rèn)的，就相當(dāng)于是選中的狀態(tài)。
·如果這里還有單選，這里還有一個(gè)，如果叫CSS，把這個(gè)先取消掉。這里其實(shí)是有兩個(gè)選項(xiàng)，兩個(gè)可選項(xiàng)，整個(gè)的結(jié)果是希望是呈現(xiàn)單選的狀態(tài)，選中其中另外一個(gè)，肯定要呈現(xiàn)一種未選中的狀態(tài)。
·現(xiàn)在兩個(gè)都可以同時(shí)選中，這樣肯定是不行的。所以這里可以用屬性，叫做name，就叫section。下面同時(shí)也取名字，也是name同樣的值。
這里可以把它理解成用了同一個(gè)名字的單選框，他們最終只能選中其中一個(gè)。可以試一下，比如說點(diǎn)CSS，點(diǎn)html，這個(gè)東西是單選框里面非常重要的知識(shí)點(diǎn)。
用鼠標(biāo)改變?cè)氐某叽纭?/p>
如需了解更多有關(guān) resizable 交互的細(xì)節(jié)，請(qǐng)查看 API 文檔 可調(diào)整尺寸小部件（Resizable Widget）。
默認(rèn)功能
在任意的 DOM 元素上啟用 resizable 功能。通過鼠標(biāo)拖拽右邊或底邊的邊框到所需的寬度或高度。
<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>jQuery UI 縮放（Resizable） - 默認(rèn)功能</title>
<link rel="stylesheet" >
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" >
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script></head><body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">縮放（Resizable）</h3></div>
</body></html>查看演示
動(dòng)畫
使用 animate 選項(xiàng)（布爾值）使縮放行為動(dòng)畫化。當(dāng)該選項(xiàng)設(shè)置為 true 時(shí)，拖拽輪廓到所需的位置，元素會(huì)在拖拽停止時(shí)以動(dòng)畫形式調(diào)整到該尺寸。
<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>jQuery UI 縮放（Resizable） - 動(dòng)畫</title>
<link rel="stylesheet" >
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" >
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-helper { border: 1px dotted gray; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
animate: true
});
});
</script></head><body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">動(dòng)畫</h3></div>
</body></html>查看演示
限制縮放區(qū)域
定義縮放區(qū)域的邊界。使用 containment 選項(xiàng)來指定一個(gè)父級(jí)的 DOM 元素或一個(gè) jQuery 選擇器，比如 'document.'。
<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>jQuery UI 縮放（Resizable） - 限制縮放區(qū)域</title>
<link rel="stylesheet" >
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" >
<style>
#container { width: 300px; height: 300px; }
#container h3 { text-align: center; margin: 0; margin-bottom: 10px; }
#resizable { background-position: top left; width: 150px; height: 150px; }
#resizable, #container { padding: 0.5em; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
containment: "#container"
});
});
</script></head><body>
<div id="container" class="ui-widget-content">
<h3 class="ui-widget-header">限制</h3>
<div id="resizable" class="ui-state-active">
<h3 class="ui-widget-header">縮放（Resizable）</h3>
</div></div>
</body></html>查看演示
延遲開始
通過 delay 選項(xiàng)設(shè)置延遲開始縮放的毫秒數(shù)。通過 distance 選項(xiàng)設(shè)置光標(biāo)被按下且拖拽指定像素后才允許縮放。
<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>jQuery UI 縮放（Resizable） - 延遲開始</title>
<link rel="stylesheet" >
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" >
<style>
#resizable, #resizable2 { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3, #resizable2 h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
delay: 1000
});
$( "#resizable2" ).resizable({
distance: 40
});
});
</script></head><body>
<h3 class="docs">時(shí)間延遲 (ms):</h3><div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">時(shí)間</h3></div>
<h3 class="docs">距離延遲 (px):</h3><div id="resizable2" class="ui-widget-content">
<h3 class="ui-widget-header">距離</h3></div>
</body></html>查看演示
助手
通過設(shè)置 helper 選項(xiàng)為一個(gè) CSS class，當(dāng)縮放時(shí)只顯示元素的輪廓。
<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>jQuery UI 縮放（Resizable） - 助手</title>
<link rel="stylesheet" >
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" >
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-helper { border: 2px dotted #00F; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
helper: "ui-resizable-helper"
});
});
</script></head><body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">助手</h3></div>
</body></html>查看演示
最大/最小尺寸
使用 maxHeight、maxWidth、minHeight 和 minWidth 選項(xiàng)限制 resizable 元素的最大或最小高度或?qū)挾取?/p>
<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>jQuery UI 縮放（Resizable） - 最大/最小尺寸</title>
<link rel="stylesheet" >
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" >
<style>
#resizable { width: 200px; height: 150px; padding: 5px; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
maxHeight: 250,
maxWidth: 350,
minHeight: 150,
minWidth: 200
});
});
</script></head><body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">放大/縮小</h3></div>
</body></html>查看演示
保持縱橫比
保持現(xiàn)有的縱橫比或設(shè)置一個(gè)新的縱橫比來限制縮放比例。設(shè)置 aspectRatio 選項(xiàng)為 true，且可選地傳遞一個(gè)新的比率（比如，4/3）。
<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>jQuery UI 縮放（Resizable） - 保持縱橫比</title>
<link rel="stylesheet" >
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" >
<style>
#resizable { width: 160px; height: 90px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
aspectRatio: 16 / 9
});
});
</script></head><body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">保持縱橫比</h3></div>
</body></html>查看演示
對(duì)齊到網(wǎng)格
對(duì)齊 resizable 元素到網(wǎng)格。通過 grid 選項(xiàng)設(shè)置網(wǎng)格單元的尺寸（以像素為單位的高度和寬度）。
<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>jQuery UI 縮放（Resizable） - 對(duì)齊到網(wǎng)格</title>
<link rel="stylesheet" >
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" >
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
grid: 50
});
});
</script></head><body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">網(wǎng)格</h3></div>
</body></html>同步縮放
通過點(diǎn)擊并拖拽一個(gè)元素的邊來同時(shí)調(diào)整多個(gè)元素的尺寸。給 alsoResize 選項(xiàng)傳遞一個(gè)共享的選擇器。
<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>jQuery UI 縮放（Resizable） - 同步縮放</title>
<link rel="stylesheet" >
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" >
<style>
#resizable { background-position: top left; }
#resizable, #also { width: 150px; height: 120px; padding: 0.5em; }
#resizable h3, #also h3 { text-align: center; margin: 0; }
#also { margin-top: 1em; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
alsoResize: "#also"
});
$( "#also" ).resizable();
});
</script></head><body>
<div id="resizable" class="ui-widget-header">
<h3 class="ui-state-active">縮放</h3></div>
<div id="also" class="ui-widget-content">
<h3 class="ui-widget-header">同步縮放</h3></div>
</body></html>查看演示
文本框
可縮放的文本框。
<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>jQuery UI 縮放（Resizable） - 文本框</title>
<link rel="stylesheet" >
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" >
<style>
.ui-resizable-se {
bottom: 17px;
}
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
handles: "se"
});
});
</script></head><body>
<textarea id="resizable" rows="5" cols="20"></textarea>
</body></html>視覺反饋
通過設(shè)置 ghost 選項(xiàng)為 true，可在縮放期間顯示一個(gè)半透明的元素，而不是顯示一個(gè)實(shí)際的元素。
門一種新的插件有沒有一種通用的方法呢？
以下將需要3分鐘左右的閱讀時(shí)間。
第一步閱讀說明簡(jiǎn)介。了解到：目前是4.4版支持Bootstrap3.x及4.0版。5.x版本是重寫的一個(gè)最新版本。該插件去預(yù)覽上傳多種格式的文件。支持Ajax。以下以4.4版說明。
來原網(wǎng)絡(luò)
第二步安裝（引用）。引用CSS、JS（注意順序）
CSS：bootstrap.min.css，fileinput.min.css
JS：
jquery-3.3.1.min.js，（必需）
piexif.min.js（可選，可以在上傳前改變圖片），
sortable.min.js（可選，如果要排序文件的話），
popper.min.js（可選，用于放大和預(yù)覽文件），
bootstrap.min.js，（必需）
fileinput.min.js，（主文件）
theme.js，（主題包，字體）
(lang).js（本地化，中文引入zh.js）
第三步使用。
<!--HTML input標(biāo)簽 ，注意type是file-->
<input id="ID" type="file" class="file" data-preview-file-type="text" >
$("#ID").fileinput();//默認(rèn)功能，$("#input-id") 。Jquery對(duì)象，HTML代碼中的id為ID
//fileinput()執(zhí)行函數(shù)。可以放在$(function(){..放在這里..})也可以放在任何
//一位置總結(jié)：以上是步驟，相信學(xué)習(xí)一個(gè)新的插件都能以這種標(biāo)準(zhǔn)流程一定會(huì)有收獲。
下次將分享常用的屬性和例子代碼學(xué)習(xí)。
詳細(xì)學(xué)習(xí)兩個(gè)重要的屬性：initialPreview，initialPreviewConfig。
下回再見。謝謝閱讀。晚安。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
