、獲取上傳圖片的地址
html代碼:
<form action="">
<img src="" alt=""/>
<input type="file" />
</form>
jq代碼:
$("form input[type='file']").on("change",function(){
var img=this.value;//獲取的是一個臨時地址c:\fakepath\圖片名
if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(img)){
alert("選擇的文件格式不對")
return false;
}
var f=this.file[0];
var src=window.URL.createObjectURL(f);
$(this).prev().attr("src",src);//當(dāng)前JQ代理對象上面的DOM元素
})
2、判斷復(fù)選框狀態(tài)
這里有三種方法:
第一種(通過is方法判斷):if($("input[type='checked']").is(":checked")){
被選中狀態(tài)需要做什么
}
第二種(通過prop獲取屬性值方法):if($("input[type='checked']").prop("checked")){
被選中狀態(tài)需要做什么
}
一般獲取狀態(tài)屬性的值都選擇用prop而不用attr
第三種:if($("input[type='checked']")).get(0).checked){
被選中狀態(tài)需要做什么
}
同樣可以判斷狀態(tài),那也可以改變狀態(tài):
$("input[type='checked']").prop("checked","true");//選中
$("input[type='checked']").prop("checked","false");//不選中
同樣selected也可以這樣判斷和修改
3、文本框不能編輯屬性:readonly
<input type="text" redaonly />只讀文本框,不能進(jìn)行編輯
4、去除input文本框點(diǎn)擊邊框
input{outline:none;}
5.只能為中文
<input type="text" onkeyup="value=value.replace(/[ -~]/g,'')" onkeydown="if(event.keyCode==13)event.keyCode=9" />
6.只能為數(shù)字
<input type="text" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" />
7.只能輸入英文和數(shù)字
<input type="text" onkeyup="value=value.replace(/[\W]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" />
nput框作為一個簡單的輸入框,你對它的屬性知道有多少?
常見的屬性(帶new為h5新增屬性):
1、accept:accept 屬性規(guī)定了可通過文件上傳提交的服務(wù)器接受的文件類型。僅用于input的type類型為"file"的時候。
屬性值:
audio/*,音頻
video/* ,視頻
image/* ,圖片
MIME_type,一個有效的 MIME 類型,不帶參數(shù)
<input type="file" name="pic" accept="image/*" />
// 如需規(guī)定多個值,請使用逗號分隔
<input type="file" accept="audio/*,video/*,image/*" />
2、value:指定元素的value值。
屬性值:text
value 屬性對于不同 input 類型,用法也不同:
注意:value 屬性對于 <input type="checkbox"> 和 <input type="radio"> 是必需的。
注意:value 屬性不適用于 <input type="file">。
<input value="文本" />
3、name:表示的該文本輸入框名稱。用于表單提交后引用表單數(shù)據(jù)。只有設(shè)置了 name 屬性的表單元素才能在提交表單時傳遞它們的值。
屬性值:text
<input type="text" name="email" />
4、size:輸入框的長度大小。
屬性值:number
<input type="text" name="email" size="35" />
注意:size 屬性適用于下面的 input 類型:text、search、tel、url、email 和 password。
5、maxlength:輸入框中允許輸入字符的最大數(shù)。
屬性值:number
<input type="text" name="usrname" maxlength="10" />
6、readonly:表示該框中只能顯示,不能添加修改。
<input type="text" name="country" value="中國" readonly />
7、required(new):屬性規(guī)定必須在提交表單之前填寫輸入字段。
<input type="text" name="username" required />
8、alt:定義圖像輸入的替代文本。 (只針對type="image")
屬性值:text
<input type="image" src="submit.gif" alt="Submit" width="48" height="48" />
9、autocomplete(new):autocomplete 屬性規(guī)定輸入字段是否應(yīng)該啟用自動完成功能。
屬性值:on/off,默認(rèn)啟動自動完成功能。
<input autocomplete="off" />
注意:autocomplete 屬性適用于下面的 <input> 類型:text、search、url、tel、email、password、datepickers、range 和 color。
10、autofocus(new):屬性規(guī)定當(dāng)頁面加載時 <input> 元素應(yīng)該自動獲得焦點(diǎn)。
屬性值:autofocus
<input type="text" autofocus />
11、checked:checked 屬性規(guī)定在頁面加載時應(yīng)該被預(yù)先選定的 <input> 元素。 (只針對 type="checkbox" 或者 type="radio")
屬性值:checked
<input type="checkbox" name="vehicle" value="Car" checked />小汽車
12、disabled:disabled 屬性規(guī)定應(yīng)該禁用的 <input> 元素。
屬性值:disabled
<input type="text" name="lname" disabled />
13、form(new): form 屬性規(guī)定 <input> 元素所屬的一個或多個表單。
位于 form 表單外的輸入字段(但仍然屬于 form 表單的一部分):
<form action="demo-form.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>
14、formaction(new):屬性規(guī)定當(dāng)表單提交時處理輸入控件的文件的 URL。(只針對 type="submit" 和 type="image")
屬性值:URL
<input type="submit" formaction="demo-admin.php" value="提交" />
注意:
formaction 屬性規(guī)定當(dāng)表單提交時處理輸入控件的文件的 URL。
formaction 屬性覆蓋 <form> 元素的 action 屬性。
15、formenctype(new):屬性規(guī)定當(dāng)表單數(shù)據(jù)提交到服務(wù)器時如何編碼(只適合 type="submit" 和 type="image")。
屬性值:application/x-www-form-urlencoded ;multipart/form-data text/plain
<input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交" />
注意:
formenctype 屬性規(guī)定當(dāng)表單數(shù)據(jù)提交到服務(wù)器時如何編碼(僅適用于 method="post" 的表單)。
formenctype 屬性覆蓋 <form> 元素的 enctype 屬性。
16、formmethod (new):定義發(fā)送表單數(shù)據(jù)到 action URL 的 HTTP 方法。 (只適合 type="submit" 和 type="image")
屬性值:get / post
<input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交" />
17、formnovalidate(new):formnovalidate 屬性覆蓋 <form> 元素的 novalidate 屬性。
屬性值:formnovalidate
<input type="submit" formnovalidate="formnovalidate" value="不驗(yàn)證提交">
18、formtarget (new):規(guī)定表示提交表單后在哪里顯示接收到響應(yīng)的名稱或關(guān)鍵詞。(只適合 type="submit" 和 type="image")
屬性值:_blank; _self; _parent; _top; framename
<input type="submit" formtarget="_blank" value="提交到一個新的頁面上">
19、height (new);width(new):屬性規(guī)定 <input> 元素的高度和寬度。 (只針對type="image")
屬性值:pixels
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48" />
20、max (new);min(new):屬性規(guī)定 <input> 元素的最大值和最小值。
屬性值:number;date
<input type="date" name="bday" max="1979-12-31">
<input type="date" name="bday" min="2000-01-02">
<input type="number" name="quantity" min="1" max="5">
21、multiple (new):屬性規(guī)定允許用戶輸入到 <input> 元素的多個值。
屬性值:multiple
<input type="file" name="img" multiple>
注意:multiple 適用于以下 input 類型:email 和 file。
22、pattern (new):pattern 屬性規(guī)定用于驗(yàn)證 <input> 元素的值的正則表達(dá)式。
屬性值:regexp;
<form action="demo_form.html">
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>
23、placeholder (new): 屬性規(guī)定可描述輸入 <input> 字段預(yù)期值的簡短的提示信息 。
屬性值:text
<input placeholder="請輸入姓名" />
24、src : src 屬性規(guī)定顯示為提交按鈕的圖像的 URL。 (只針對 type="image")
屬性值:URL
<input type="image" src="submit.gif" alt="Submit" />
25、step (new): step 屬性規(guī)定 <input> 元素的合法數(shù)字間隔。
屬性值:number
<input type="number" name="points" step="3">
26、list(new) :屬性引用 <datalist> 元素,其中包含 <input> 元素的預(yù)定義選項(xiàng)。
屬性值:datalist_id
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Google Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
27、type: type 屬性規(guī)定要顯示的 <input> 元素的類型。
屬性值:button;checkbox;color;date;datetime;datetime-local;email;file;hidden;image;month;number;password;radio;range;reset;search;submit;tel;text;time;url;week
type的屬性值眾多,也是用的比較多的一個。
button:定義可點(diǎn)擊的按鈕(通常與 JavaScript 一起使用來啟動腳本)。
checkbox:定義復(fù)選框。
color(new):定義拾色器。
date(new):定義 date 控件(包括年、月、日,不包括時間)。
datetime(new):定義 date 和 time 控件(包括年、月、日、時、分、秒、幾分之一秒,基于 UTC 時區(qū))。
datetime-local(new):定義 date 和 time 控件(包括年、月、日、時、分、秒、幾分之一秒,不帶時區(qū))。
email(new):定義用于 e-mail 地址的字段。file定義文件選擇字段和 "瀏覽..." 按鈕,供文件上傳。
hidden:定義隱藏輸入字段。
image:定義圖像作為提交按鈕。
month(new):定義 month 和 year 控件(不帶時區(qū))。
number(new):定義用于輸入數(shù)字的字段。
password:定義密碼字段(字段中的字符會被遮蔽)。
radio:定義單選按鈕。
range(new):定義用于精確值不重要的輸入數(shù)字的控件(比如 slider 控件)。
reset:定義重置按鈕(重置所有的表單值為默認(rèn)值)。
search(new):定義用于輸入搜索字符串的文本字段。
submit:定義提交按鈕。
tel(new):定義用于輸入電話號碼的字段。
text:默認(rèn)。定義一個單行的文本字段(默認(rèn)寬度為 20 個字符)。
time(new):定義用于輸入時間的控件(不帶時區(qū))。
url(new):定義用于輸入 URL 的字段。
week(new):定義 week 和 year 控件(不帶時區(qū))。
、表單標(biāo)簽Form
1. 什么是表單
表單在網(wǎng)頁中負(fù)責(zé)數(shù)據(jù)采集功能的。表單是有3部分組成:
(1)表單標(biāo)簽 <form></form>
(2)表單域
(3)表單按鈕
2. Form標(biāo)簽、
語法格式:
<form action=”url” method=”get|post”>
</form>
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。