찾다

집  >  기사  >  웹 프론트엔드  >  HTML5 양식 태그를 사용하여 양식 유효성 검사를 해방하고, 파일 업로드를 추가하고, drag and drop_html5 튜토리얼 기술을 통합하는 방법

HTML5 양식 태그를 사용하여 양식 유효성 검사를 해방하고, 파일 업로드를 추가하고, drag and drop_html5 튜토리얼 기술을 통합하는 방법

WBOY
WBOY원래의
2016-05-16 15:49:291710검색

HTML 형식 관련 내용

새 속성

개인의 이해

양식

HTML5 이전에는 양식의 하위 요소를 태그에 배치해야 했습니다. 이제 태그에 양식 태그를 지정할 수 있습니다.

설명: 이 기능은 실제로 발생하는 몇 가지 문제를 해결합니다. 예를 들어 iframe이 비동기 이미지 업로드를 시뮬레이션할 때 이미지를 양식 외부에 작성해야 합니다.

형성

양식 방법

이 속성은 양식 제출 페이지를 버튼으로 제어할 수 있도록 버튼(제출)에 사용됩니다.

formmethod는 각 버튼의 제출 방법을 지정합니다

자리표시자

이 속성은 텍스트 상자에 프롬프트 정보를 표시하는 데 사용됩니다.

목록

list 속성은 datalist와 함께 사용해야 하며 이는 텍스트 상자와 동일하며 선택을 시뮬레이션하는 데 매우 적합한 속성입니다

자동 초점

적극적으로 초점을 맞추기 위해 텍스트 상자에 사용되며 유용한 내용입니다.

무료인증에 입력속성을 추가했는데, 이는 다양한 브라우저에서 지원되지 않습니다

전화

전화문의

URL

인증URL

이메일

이메일 확인

날짜/시간

날짜 유형 확인, 날짜 선택 플러그인이 나타납니다. . .

번호

숫자만 가능합니다

범위

관리번호 범위

색상

색상 선택기, 정말 좋은 것 같아요. . .

HTML5에는 양식 관련 속성이 많이 추가되었습니다. 솔직히 말해서 이런 것들은 정말 사려 깊습니다! ! ! 대체로:

완전히 자유로운 양식 검증

호환성 문제를 고려하지 않았다면 바로 뛰어들고 싶지만 호환성 문제를 생각하면 엄청난 두통을 겪게 될 것입니다! ! !

원래 좋았던 일이 역사적인 이유로 작업량을 늘리게 되니까요! ! !

잘못된 시간에 옳은 일을 하는 사람은 옳은 것처럼 보이지만 사실은 옳은 것입니다. . . 그러나 당신은 그가 틀렸다는 것을 알게 될 것입니다. . . .

페이지 요소 강화

项目

个人理解

figure/figcaption

据说表示页面独立内容，移除后无影响，暂无发现用处..

details

该标签有点意思，用于替代js中，元素收起展开功能。

最新ff都不支持……个人觉得，既然提供了该标签应该提供属性表示上下展开或者左右展开；

mark

高亮显示，当真语义化

progress

屌丝们，可以告别gif图片了，也不用div模拟百分比了，与windows区域一致的进度条出现啦，异步文件上传更加完善！

改良ol

老夫就没有用过这个主。。。

……
프로젝트 개인의 이해 그림/캡션 페이지의 독립적인 콘텐츠를 나타낸다고 합니다. 삭제된 후에도 아무런 영향이 없습니다.. 자세히 이 태그는 js에서 요소 축소 및 확장 기능을 대체하는 데 사용됩니다. 최신 ff는 지원하지 않습니다... 개인적으로 이 태그가 제공되기 때문에 상하 또는 좌우 확장을 나타내는 속성을 제공해야 합니다. 마크 강조 표시, 진정한 의미 진행 상황 다이아몬드님, gif 이미지와 작별하세요. 백분율을 시뮬레이션하기 위해 div를 사용할 필요가 없습니다. 창 영역과 일치하는 진행률 표시줄이 나타나고 비동기 파일 업로드가 더 완벽해졌습니다! 개선됨 저는 이 마스터를 사용해본 적이 없습니다. . . ……

위의 요소는 필수 요소이므로 자세히 설명할 필요가 없습니다. 다음으로 이 글의 주인공이 등장합니다.

파일 API

FileList 및 파일 객체:

HTML4에서는 파일 태그를 사용하면 하나의 파일만 선택할 수 있지만, HTML5에서는 파일 태그에 multiple 속성을 설정하면 여러 파일을 선택할 수 있습니다! ! !

선택을 하면 여기의 filelist 객체가 생성되는데, 이는 간단히 말해서 파일 배열입니다.

파일 객체에는 2개의 속성이 있으며, name은 파일 이름(경로 제외)을 나타내고, lastModifiedDate는 마지막 수정 시간을 나타냅니다.

사실 HTML4에서 파일을 조작하면 파일 크기 등 많은 로컬 속성을 얻을 수 있는데, 사악한 IE는 이를 지원하지 않고 IE9 이후에는 개선됐다.

그래서 클라이언트에서 너무 큰 파일을 업로드하라고 하면 포기해주세요. . .

블롭 개체

은 바이너리 원시 데이터를 나타내고 바이트 내부 원시 데이터에 액세스하기 위한 슬라이스 메소드를 제공합니다. size는 blob 객체의 바이트 길이를 나타내고, type은 해당 MIME 유형을 나타내며, 유형을 알 수 없는 경우 빈 문자열이 반환됩니다.

자, 간단한 실험을 해보세요:

코드를 복사하세요
코드는 다음과 같습니다.

파일 정보



</title> ;<br /> <script src="../jquery-1.7.1.js" type="text/javascript"></script><br> <script type="text/javascript"> <br> $ (문서).ready(함수 () {<br> $('#wl').click(함수 () {<br> var f = $('#file')[0];<br> <br> var s = '';<br> <br> });<br> });<br> </script><br> </head><br> <body><br> <input type="file" id="file" multiple /><br> <button id="wl"><br> 파일 업로드</button><br> </body><br> < /html><br> </div> <br> <p>ff에서 사진을 선택한 후 제출하고 중단점을 설정한 후 살펴보세요. </p> <p><img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415535523.jpg"></p> <p>파일의 주인공이 등장하는데 바로 그 사람입니다. 속성을 출력하여 확인해 보겠습니다. </p> <p><img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415535524.jpg"></p> <p>정말 있을 건 다 있어요! 하지만 이 속성으로 할 수 있는 일은 많습니다. . . ie7과 8을 살펴보겠습니다. </p> <p><img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415535525.jpg"></p> <p>시청자 여러분 저는 그런 속성이 전혀 없어서 다재다능합니다. . . </p> <p><strong>그나저나 IE 브라우저 디버깅이 너무 힘든 것 같아요. ff의 Firebug나 Google 자체 플러그인처럼 좋은 IE 개발 플러그인이 있나요? ? </strong></p> <p> </p> <p><strong>FIleReader 인터페이스</strong> </p> <p>파일 판독기 인터페이스는 파일을 메모리로 읽어올 수 있어 사진을 편안하게 미리 볼 수 있지만 그 유용성은 그 이상입니다. </p> <p><strong>파일 리더의 네 가지 방법: </strong></p> <p>readAsBinaryString은 파일을 바이너리 코드로 읽습니다. 일반적으로 데이터를 백엔드로 전달합니다. </p> <p>readAsText는 파일을 텍스트로 읽습니다. - 텍스트 내용을 읽습니다. </p> <p>readAsURL은 파일을 DataURL로 읽습니다. 일반적으로 작은 파일, 이미지 또는 HTML입니다. </p> <p>중단하면 파일이 너무 크고 대기 시간이 너무 길어 읽기가 중단됩니다</p> <p> </p> <p><strong>filereader 인터페이스 이벤트: </strong></p> <p>읽기 중단 트리거 </p> <p>읽기에 실패하면 오류가 발생합니다. </p> <p>읽기 시작 시 onloadstart가 트리거됩니다. </p> <p>onprogress 로드 중</p> <p>읽기에 성공하면 onload가 트리거됩니다. </p> <p>성공 또는 실패에 관계없이 읽기가 완료된 후 onloadend가 트리거됩니다. </p> <p> 연습 없이 말하는 것만으로는 충분하지 않습니다. 여기에서 약간의 실험을 해보겠습니다. <br><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode5'));"><u>코드 복사</u></span></div>코드는 다음과 같습니다. 다음과 같습니다:</div> <div class="msgborder" id="phpcode5"> <br> 나는 작은 실험이다 <br> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd"><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <제목>< ;/title><br> <script src="../jquery-1.7.1.js" type="text/javascript"></script><br> <script type="text/javascript" "><br> $(document).ready(function () {<br> var bt = $('#wl');<br> var file = $('#file');<br> var type = $('#type');<br> var result = $('#result');<br> <br> var func = {};<br> func.readAsDataURL = 함수(파일) {<br> //이미지인지 확인<br> if (!/image/w /.test(file.type)) {<br> Alert('비이미지 형식');<br> return false;<br> }<br> var reader = new FileReader();<br> reader.readAsDataURL(file);<br> reader.onload = function (e) {<br> result.html('<img src="' this .result ' "/>');<br> }<br> }<br> <br> func.readAsBinaryString = 함수(파일) {<br> <br> var reader = new FileReader();<br> reader.readAsBinaryString(파일);<br> reader.onload = 함수(e) {<br> result.html(this.result);<br> }<br> }<br> <br> func.readAsText = 함수 (파일) {<br> <br> var reader = new FileReader();<br> reader.readAsText(file);<br> reader.onload = 함수 (e) {<br> result.html(this.result );<br> }<br> }<br> <br> bt.click(function () {<br> if (func[type.val()] && typeof func[type.val()] == ' function') {<br> func[type.val()](file[0].files[0]);<br> }<br> });<br> <br> });<br> < ;/script> ;<br> </head><br> <body><br> <div id="result"><br> </div><br> <input type="file " id= "file" multiple /><br> <select id="type"><br> <option value="readAsDataURL">readAsDataURL</option><br> <option value=" readAsBinaryString"> ;readAsBinaryString</option><br> <option value="readAsText">readAsText</option><br> </select><br> <button id="wl"><br> 파일 읽기</button><br> <br> </body><br> </html><br> </div> <br> <p>최신 브라우저를 사용해 보세요! </p> <p>다시 판단하여 이벤트 실행 순서를 살펴보겠습니다. </p> <p> 　　 reader.onload = 기능 (e) {<br>                                                                                                                                       경고('진행 중');<br>                     ~   reader.onerror =                                                    reader.onloadstart = 기능 (e) {<br>                     Alert('onloadstart'); >                                                                                                          ~ <br><br>특정 애플리케이션: <br><br><br><br> <br><br><br><br><br></p>코드 복사<p><strong><br>코드는 다음과 같습니다.<img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415535526.jpg"><div class="msgborder" id="phpcode6"> <br> 简单图片上传 <br> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <title>








<버튼 유형 =" 버튼" id="submitForm">이미지 업로드




드래그 사실 API를 넣기 전에 jquery를 사용하여 드래그 앤 드롭 플러그인도 작성했습니다. .

직장에서 만난 것들 [팝업창] [드래그 앤 드롭] [비동기 파일 업로드]

하지만 HTML5 통합이 확실히 더 좋습니다! ! ! 이제 이 내용을 살펴보겠습니다. . . 그리고 그 힘은 단지 브라우저에서만 드래그하는 것이 아닙니다. 정말 놀랍습니다(업로드하려면 이미지를 드래그하세요)

HTML5에서는 기본적으로 이미지와 링크를 드래그 앤 드롭할 수 있습니다. 드래그 앤 드롭을 하려면 다른 요소를 draggable="true"로 설정해야 합니다. 바로 시도해 보겠습니다.

코드 복사
코드는 다음과 같습니다.

拖放的例子




<제목>< /title>



请拖放




< ;/html>

拖放时候一定要记住, 阻止页side默认行为，否则会打开new窗口的，其中以下亦是认点：

1 拖放可使用 DataTransfer는 递数据, 该对象是不常有用, 因为在拖动目标标时, 可能会经过其它遠素, 我们可以用此传递信息;

API：

드래그 스타트 被拖放元素 开始拖放时

드래그 被拖放元素 拖放过程中

드래그오버  拖放过程中鼠标经过的元素 本元素内移动

dragleave  拖放过程中鼠标经过的元素 离开本元素

드롭 拖放적目标원素 拖动적원素放到了本원素中

dragend 拖放的对象 拖放结束 저희 회사에는 많은 정보가 있습니다.习时的对研究对象。

结语

html5의 문서에 대한 내용은 다음과 같습니다.是还是感觉很厉害的样子!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML5 이미지 그리기(1부): 차세대 웹 페이지를 이끄는 캔버스 요소에 대한 문제_html5 튜토리얼 기술다음 기사：HTML5 이미지 그리기(1부): 차세대 웹 페이지를 이끄는 캔버스 요소에 대한 문제_html5 튜토리얼 기술

관련 기사

더보기