HTML5的form標簽怎么使用

發(fā)布時間：2022-03-03 13:51:58 來源：億速云閱讀：90 作者：iii 欄目：web開發(fā)

今天小編給大家分享一下HTML5的form標簽怎么使用的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

form

html5之前，表單內的從屬元素需要放入標簽中，現(xiàn)在可以為標簽指定form標簽即可

點評：該功能解決了我們實際中遇到的一些問題，比如iframe模擬異步圖片上傳時，就必須將圖片寫到form外。

formaction

formmethod

該屬性用于按鈕（submit）讓表單提交頁面可又按鈕控制

formmethod指定各按鈕提交方式

placehoder

該屬性非常有用，用于文本框中顯示提示信息，非常有用的一屬性

list

list屬性需要與datalist一同使用，相當于文本框，模擬select，非常適用的一個屬性

autofocus

用于文本框主動獲取焦點，有用的東東

新增input屬性，解放驗證，各瀏覽器支持不好

tel

用于電話

url

驗證url

驗證郵箱

date/time

日期類驗證，會出現(xiàn)日期選擇插件哦。。。

number

只能是數(shù)字

range

控制數(shù)字范圍

color

顏色選擇器，好東西啊。。。

HTML5中增加了很多與form有關的屬性，說實在的，這些東西真心貼心?。。?！很大程度上講：

完全解放表單驗證

若不是考慮兼容性問題，老夫恨不得立即投入其中，但一旦想起兼容性問題的話，你就會非常頭疼?。?！

因為原本很好的東西，卻是因為歷史的原因，反而會增加我們的工作量?。?！

在錯的時間，做對的事情，他看起來是對的，實際上也是對的。。。但你會發(fā)現(xiàn)，他錯了。。。。

增強頁面元素

項目

個人理解

figure/figcaption

據(jù)說表示頁面獨立內容，移除后無影響，暫無發(fā)現(xiàn)用處..

details

該標簽有點意思，用于替代js中，元素收起展開功能。

最新ff都不支持……個人覺得，既然提供了該標簽應該提供屬性表示上下展開或者左右展開；

mark

高亮顯示，當真語義化

progress

絲們，可以告別gif圖片了，也不用div模擬百分比了，與windows區(qū)域一致的進度條出現(xiàn)啦，異步文件上傳更加完善！

改良ol

老夫就沒有用過這個主。。。

……

以上元素屬于可有可無的元素，不必贅述，接下來，本文明星對象登場：

文件API

FileList與file對象：

在html4中，file標簽只允許選擇一個文件，但html5中，對file標簽設置multiple屬性后，變可以選擇多文件了?。?！

而，選擇后便會形成這里的filelist對象，即一個個file組成的對象列表，簡單來說就是file數(shù)組。

file對象具有2屬性，name代表文件名（不包括路徑），lastModifiedDate表示最后修改時間

其實我們在html4中操作file時，可以獲取本地很多屬性，比如文件大小，但是萬惡的ie不支持，到ie9后才有所好轉。

所以想客戶端提示文件上傳過大的同學放棄吧。。。

Blob對象

表示二進制原始數(shù)據(jù)，提供一slice方法訪問字節(jié)內部原始數(shù)據(jù)；size表示blob對象字節(jié)長度、type表示其mime類型，類型未知則返回空字符串。

來來，簡單做一實驗：

復制代碼

代碼如下:

關于File

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

$(document).ready(function () {

$('#wl').click(function () {

var f = $('#file')[0];

var s = '';

});

</script>

</head>

<body>

文件上傳</button>

</body>

</html>

我們在ff中選擇圖片后，提交，設個斷點看看：

file主角登場，就是他了，我們將之屬性輸出來看看：

真的是應有盡有啊！有了該屬性就可以做很多事情了，但是。。。我們來看看ie7、8：

各位觀眾，人家壓根沒這個屬性，所以一切百搭。。。

話說，我覺得ie瀏覽器調試起來很痛苦，請問各位大神有沒有什么好的ie開發(fā)插件，就像ff的firebug，google自帶的插件？？

FIleReader接口

filereader接口，可將文件讀入內存，有了這個東東我們就可以很舒服的做圖片預覽了，但他的公用不止如此。

filereader的四個方法：

readAsBinaryString 將文件讀取為二進制碼——通常我們將數(shù)據(jù)傳給后端；

readAsText 將文件讀取為文本——讀取文本內容；

readAsURL 將文件讀取為DataURL——一般是小文件，圖片或者html；

abort 中斷讀取，因為文件過大等待時間就很長了

filereader接口事件：

onabort 讀取中斷觸發(fā)；

onerror 讀取失敗觸發(fā)；

onloadstart 開始讀取時觸發(fā)；

onprogress 讀取中

onload 讀取成功時觸發(fā)；

onloadend 讀取完成后觸發(fā)，無論成功失?。?/p>

光說不練不行，我們這里做個小實驗：

復制代碼

代碼如下:

我是一個小實驗

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

$(document).ready(function () {

var bt = $('#wl');

var file = $('#file');

var type = $('#type');

var result = $('#result');

var func = {};

func.readAsDataURL = function (file) {

//驗證是否為圖片

if (!/image///w+/.test(file.type)) {

alert('非圖片格式');

return false;

}

var reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = function (e) {

result.html('<img src="' + this.result + '"/>');

}

func.readAsBinaryString = function (file) {

var reader = new FileReader();

reader.readAsBinaryString(file);

reader.onload = function (e) {

result.html(this.result);

}

func.readAsText = function (file) {

var reader = new FileReader();

reader.readAsText(file);

reader.onload = function (e) {

result.html(this.result);

}

bt.click(function () {

if (func[type.val()] && typeof func[type.val()] == 'function') {

func[type.val()](file[0].files[0]);

}

});

</script>

</head>

<body>

</div>

<option value="readAsDataURL">readAsDataURL</option>

<option value="readAsBinaryString">readAsBinaryString</option>

<option value="readAsText">readAsText</option>

</select>

讀取文件</button>

</body>

</html>

用最新瀏覽器運行試試呢！

我們再做一個判斷，看看其事件執(zhí)行順序：

　　　　　 reader.onload = function (e) {

alert('onload');

}

reader.onprogress = function (e) {

alert('onprogress');

}

reader.onerror = function (e) {

alert('onerror');

}

reader.onloadstart = function (e) {

alert('onloadstart');

}

reader.onloaded = function (e) {

alert('onloaded');

}

此處具體應用：

復制代碼

代碼如下:

簡單圖片上傳

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

body{ font-size: 14px;}

.image_upload{ margin:10px; border: 1px solid #E0E0E0; text-align: center; padding:5px; display: inline-block; position: relative; }

.image_upload img{ max-height: 150px; max-width: 150px; }

.image_upload .rate { position: absolute; top: 6px; left: 6px; padding: 0 5px; color: White; background: black; border-radius: 5px; filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6; }

.image_upload .delete { background: url("images/del.png") no-repeat scroll 0 0 transparent; cursor: pointer; height: 16px; position: absolute; right: -6px; top: -6px; width: 16px;}

</style>

$(document).ready(function () {

var j_bt_sub = $('#submitForm'),

j_form = $('#form'),

j_state = $('#upState'),

j_file = $('#files');

var is_support = true; //判斷是否支持高級特性，經測試若是不支持filereader與file

if (typeof FileReader === 'undefined') is_support = false;

j_file.change(function () {

var file = j_file.get(0);

if (!file.files[0]) is_support = false;

//支持高級功能的瀏覽器

if (is_support) {

files = file.files;

for (var k = 0, len = files.length; k < len; k++) {

var file = files[k];

var reader = new FileReader();

reader.readAsDataURL(file);

(function (k) {

reader.onloadend = function (e) {

if (reader.error) {

alert(reader.error);

} else {

var up = $('<div class="image_upload" id="up_' + k + '"></div>');

var img = $('<img src="' + this.result + '" alt="" id="img_' + k + '">');

var rate = $('<div class="rate" id="rate_' + k + '">0%</div>');

var del = $('<div class="delete" title="刪除" id="del_' + k + '"></div>');

up.append(img);

up.append(rate);

up.append(del);

del.click(function () {

$(this).parent().remove();

});

j_state.append(up);

}

};

})(k);

} //for

} else {

//不支持的話采用傳統(tǒng)方式

}

});

//此處應該支持平滑后退，后面考慮

j_bt_sub.click(function (e) {

if (is_support) {

var file = j_file.get(0);

files = file.files;

for (var k = 0, len = files.length; k < len; k++) {

var file = files[k];

upload(file, k);

}

});

function upload(file, k) {

var up = $('#up_' + k);

var img = $('#img_' + k);

var rate = $('#rate_' + k);

var del = $('#del_' + k);

var fd = new FormData();

fd.append('upload', file);

var xhr = new XMLHttpRequest();

xhr.upload.addEventListener('progress', function (e) {

var percentComplete = Math.round((e.loaded) * 100 / e.total);

rate.html(percentComplete.toString() + '%');

}, false);

// 文件上傳成功或是失敗

xhr.onreadystatechange = function (e) {

if (xhr.readyState == 4) {

if (xhr.status == 200) {

rate.html('100%');

var url = xhr.responseText;

img.attr('src', url);

var s = '';

}

};

xhr.open("POST", "fileUpload.ashx");

//發(fā)送

xhr.send(fd);

}

});

</script>

</head>

<body>

</form>

</body>

</html>

拖放API其實之前，我還用jquery寫了個拖放的插件呢。。

工作中碰到的一些東西【彈出窗口】【拖放】【異步文件上傳】

但是集成在HTML5中當然更好?。?！我們現(xiàn)在來看看這個東東。。。并且它的強大之處，就是不止在瀏覽器中拖動，這就不得了了哦（拖動圖片上傳）

html5中默認對圖片、鏈接可以拖放，其它元素需要設置draggable="true"才能拖放，事不宜遲，老夫馬上去試試。

復制代碼

代碼如下:

<strong>拖放的例子

</strong> <!DOCTYPE html>

<head>

</head>

<body>

document.ondragover = function (e) {

e.preventDefault();

};

document.ondrop = function (e) {

e.preventDefault();

};

var source = document.getElementById('dragme');

var dest = document.getElementById('text');

source.addEventListener('dragstart', function (e) {

var dt = e.dataTransfer;

dt.setData('text/plain', '您好' + new Date());

}, false);

dest.addEventListener('dragend', function (e) {

e.preventDefault();

}, false);

dest.addEventListener('drop', function (e) {

var dt = e.dataTransfer;

var text = dt.getData('text/plain');

dest.innerHTML += text;

e.stopPropagation();

e.preventDefault();

return false;

}, false);

</script>

</body>

</html>

拖放時候一定要記住，阻止頁面默認行為，否則會打開新窗口的，其中以下亦是重點：

1 拖放可使用DataTransfer傳遞數(shù)據(jù)，該對象是非常有用的，因為在拖動目標元素時，可能會經過其它元素，我們可以用此傳遞信息；

API：

dragstart 被拖放元素開始拖放時

drag 被拖放元素拖放過程中

dragenter 拖放過程中鼠標經過的元素被拖放元素開始進入本元素時

dragover 拖放過程中鼠標經過的元素本元素內移動

drageleave 拖放過程中鼠標經過的元素離開本元素

drop 拖放的目標元素拖動的元素放到了本元素中

dragend 拖放的對象拖放結束

其實這里是有問題的，我并未去深入研究從開始拖動到經過各種元素會產生神馬情況，這個可以作為二次學習時的重點研究對象。

以上就是“HTML5的form標簽怎么使用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

HTML5的form標簽怎么使用

猜你喜歡

最新資訊

相關推薦

相關標簽