Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about how to use HTML5's form tag, the content is detailed, and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Form

Before html5, dependent elements in the form needed to be placed in tags. Now you can specify form tags for tags.

Comments: this feature solves some of the problems we encounter in practice, such as when iframe simulates asynchronous picture upload, it is necessary to write the picture outside form.

Formaction

Formmethod

This property is used for buttons (submit) so that the form submission page can be controlled by buttons

Formmethod specifies how each button is submitted

Placehoder

This property is very useful for displaying prompts in text boxes, a very useful attribute

List

The list attribute needs to be used with datalist, which is equivalent to a text box, simulates select, and is a very suitable attribute.

Autofocus

Used for text boxes to actively get focus, something useful

New input attribute, free verification, poor support for browsers

Tel

For telephones

Url

Verify url

Email

Verify mailbox

Date/time

Date class verification, there will be a date selection plug-in.

Number

Can only be numbers.

Range

Control numeric range

Color

Color picker, good stuff.

HTML5 has added a lot of attributes related to form, to be honest, these things are heartfelt! To a large extent:

Fully liberate form validation

If you don't think about compatibility, the old man would like to throw himself into it immediately, but when you think about compatibility, you will have a headache!

Because originally very good things, but because of historical reasons, but will increase our workload!

He seems to be right and actually right to do the right thing at the wrong time. But you will find that he is wrong.

Enhance page elements

Project

Personal understanding

Figure/figcaption

It is said that the independent content of the page has no effect after removal, and no use has been found for the time being.

Details

This tag is a bit interesting and is used to replace the unfold function of the element in js.

The latest ff does not support. Personally, since the tag is provided, it should provide an attribute to indicate whether to expand up or down or left or right.

Mark

Highlight, seriously semantic

Progress

Silk, you can bid farewell to gif pictures, and there is no need for div simulation percentage, the progress bar consistent with the windows area has appeared, and asynchronous file upload is more perfect!

Improved ol

The old man has never used this master.

……

The above elements are optional, so there is no need to repeat them. Next, the star object of this article takes the stage:

File API

FileList and file objects:

In html4, the file tag allows you to select only one file, but in html5, after setting the multiple attribute on the file tag, you can select multiple files!

On the other hand, the selection will form the filelist object here, that is, a list of objects made up of file, which is simply an file array.

The file object has 2 attributes, name represents the file name (excluding the path), and lastModifiedDate represents the last modification time

In fact, when we operate file in html4, we can get a lot of local attributes, such as file size, but the evil ie does not support it, and it does not improve until after ie9.

So I want the client to prompt the students whose file upload is too large to give up.

Blob object

Represents the binary raw data and provides a slice method to access the raw data inside the byte; size represents the byte length of the blob object, type represents its mime type, and an empty string is returned if the type is unknown.

Come on, do a simple experiment:

Copy the code

The code is as follows:

About File

$(document) .ready (function () {

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

Var f = $('# file') [0]

Var s =''

});

});

File upload

After we select the image in ff, submit it and set a breakpoint to see:

The protagonist of file enters the stage, and that's him. Let's output its attributes and have a look:

You really have everything! With this attribute, you can do a lot of things, but. Let's take a look at ie7, 8:

Ladies and gentlemen, I don't have this attribute at all, so everything is perfect.

In other words, I find it painful to debug ie browsers. Do you have any good ie development plug-ins, just like the plug-ins that come with ff's firebug,google?

FIleReader interface

Filereader interface, you can read files into memory, with this thing we can be very comfortable to do picture preview, but its public is more than that.

There are four methods for filereader:

ReadAsBinaryString reads the file as binary code-- usually we pass the data to the back end

ReadAsText reads the file as text-- reads the text content

ReadAsURL reads files as DataURL--, usually small files, pictures, or html

Abort interrupts reading because the file is too large and the waiting time is very long.

Filereader interface event:

Onabort read interrupt trigger

Onerror read failed to trigger

Triggered when onloadstart starts reading

Onprogress reading

Triggered when onload read is successful

Triggered after an onloadend read is completed, regardless of success or failure

We can't just talk without practice. let's do a little experiment here:

Copy the code

The code is as follows:

I'm a little experiment.

$(document) .ready (function () {

Var bt = $('# wl')

Var file = $('# file')

Var type = $('# type')

Var result = $('# result')

Var func = {}

Func.readAsDataURL = function (file) {

/ / verify whether it is a picture

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

Alert ('non-picture format')

Return false

}

Var reader = new FileReader ()

Reader.readAsDataURL (file)

Reader.onload = function (e) {

Result.html ('

')

}

}

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])

}

});

});

ReadAsDataURL

ReadAsBinaryString

ReadAsText

Read a file

Try running it with the latest browser!

Let's make another judgment and look at the sequence of events:

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')

}

Here is the specific application:

Copy the code

The code is as follows:

Simple picture upload

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: 05px; 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;}

$(document) .ready (function () {

Var j_bt_sub = $('# submitForm')

J_form = $('# form')

J_state = $('# upState')

J_file = $('# files')

Var is_support = true; / / to determine whether advanced features are supported, and if filereader and file are not supported after testing

If (typeof FileReader = = 'undefined') is_support = false

J_file.change (function () {

Var file = j_file.get (0)

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

/ / browsers that support advanced features

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 = $(''); var img = $('

')

Var rate = $('0%')

Var del = $('')

Up.append (img)

Up.append (rate)

Up.append (del)

Del.click (function () {

$(this). Parent (). Remove ()

});

J_state.append (up)

}

}

}) (k)

} / / for

} else {

/ / use the traditional way if it is not supported

}

});

/ / smooth fallback should be supported here, which will be considered later.

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; knot +) {

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)

/ / File upload succeeded or failed

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")

/ / send

Xhr.send (fd)

}

});

Upload pictures

Actually, I wrote a drag-and-drop plug-in in jquery before dragging and dropping API.

Some things encountered at work [pop-up window] [drag and drop] [asynchronous file upload]

But it's better to integrate it into HTML5! Let's take a look at this thing now. And its power is that it doesn't just drag in the browser, which is great (drag pictures to upload)

Html5 default to pictures, links can be dragged and dropped, other elements need to be set draggable= "true" to drag and drop, it is not too late, the old man immediately to try.

Copy the code

The code is as follows:

An example of drag and drop

Please drag and drop

_ 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',' Hello'+ 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')

DOS [XSS _ clean] + = text

E.stopPropagation ()

E.preventDefault ()

Return false

}, false)

When you drag and drop, you must remember to prevent the default behavior of the page, otherwise a new window will open, of which the following are the key points:

1 drag and drop can use DataTransfer to pass data, which is very useful because when you drag the target element, you may pass through other elements, which we can use to pass information

API:

When dragstart is dragged and dropped elements start to drag and drop

Drag is dragged and dropped during element drag-and-drop

When the element over which the mouse is passed during the dragenter drag-and-drop process is dragged and dropped, the element begins to enter this element

The elements that the mouse passes over during dragover drag and drop move within this element

The element that you mouse over during drageleave drag and drop leaves this element.

The target element of the drop drag and drop the element dragged into this element

End of dragend drag-and-drop object

In fact, there is a problem here, I did not go in-depth study from the beginning to drag through a variety of elements will produce Shenma situation, this can be used as the focus of the second learning object.

The above is all the content of the article "how to use the form tag of HTML5". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.