HTML5之表单新增属性

之前已经接触过的新增属性：autocomplete、autofocus、list、multiple、placeholder、required、min、max、step

　　from属性：将表单外的内容与表单进行关联

　　　　<input type="text" name="dd" form="kc" >(不再form表单中)

　　novalidate属性：设置数据提交时不进行验证

　　enctype属性：仅作了解，规定在发送服务器之前应该如何对表单数据进行编码。通常情况下我们使用默认值即可

　　accept-charset属性：仅作了解accept-charset属性规定服务器处理表单所接受的字符集。accept-charset属性允许你指定一系列字符集，服务器必须支持这些字符集，从而得以正确解释表单中的数据，通常情况下我么使用默认值即可，此属性的默认值是unkonwn，表示表单的字符集与包含表单的文档字符集相同。

lable元素及其属性

　　用来为input元素定义标注，建立一个与之相关联的标签

　　for属性，让标签与指定的input元素建立关联

　　将input元素包含在lable标签中

　　可通过accesskey建立快捷键

lable属性

　　在option元素中可以设定比标签内容更优先的选项

<optgroup label="JAVA系列">
<option lable="java" >javame</option>
<option>javase</option>
<option>javaee</option>
</optgroup>

　　optgroup的分组名称

<h3>查找你要收看的课程</h3>
<select>
<optgroup label="HTML5系列">
<option>HTML5</option>
<option>CSS3</option>
<option>javascript</option>
</optgroup>
<optgroup label="JAVA系列">
<option>javame</option>
<option>javase</option>
<option>javaee</option>
</optgroup>
</select>

textarea元素

　　用来建立多行输入文本框

　　元素标签中的内容将以文本框默认值的形式呈现

　　不仅可以用在表单中，也可以在其他块元素或内联元素中

textarea元素的属性

　　name、disable。readonly、form、reauired/autofocus/placeholder属性，这些属性的用法之前都有提到

　　rows属性：设置多行文本的行数(高度)

　　cols属性：设置多行文本的每行显示的字数(宽度)

button元素

　　用来建立一个按钮从功能上来说，与input元素建立的按钮相同

　　button元素是双标签，其内部可以配置图片与文字，进行更复杂的样式设计

　　不仅可以在表单中使用，还可以在其他块元素和内联元素中使用

button元素的属性

　　type属性：可以设置三个值，submit、reset、button与input元素设置的按钮含义相同

　　name/value/disable属性：与input的用法相同

　　autofocus属性：设置按钮自动获得焦点

　　form属性：设定按钮隶属于哪一个或多个表单

　　formmethod属性：设定表单的提交方式，将覆盖原本的提交方式

　　formnovalidate属性：设定表单将会覆盖原本的novalidate属性

　　formaction属性：指定表单数据发送对象，将覆盖原来的action属性设定

　　fromenctype：指定表单的数据发送类型，将覆盖原本的enctype属性设定

　　fromtarget属性：将覆盖原本的target属性设定。

　　重要提示：如果表单中使用button元素，不同的浏览器会提交不同的值，ie将提交button元素之间的文本值，二其他浏览器将提交value属性的内容，最好就是在表单中使用input元素来创建按钮，其他地方使用button创建按钮。

表单重写

HTML的拖放功能

1.HTML5拖放(Drag和drop)是HTML5标准的组成部分

　　2.拖动开始：ondragstart：调用了一个函数，drag(event)，它规定了被拖动的数据

　　3.设置拖动数据：setData()：设置被拖动的数据类型和值

　　4.放入位置：ondragover()：事件规定在何处放置被拖动的数据

　　5.放置：ondrop：当放置被拖数据时，会发生drop事件

<style type="text/css">
        .box{
            width:400px;
            height:400px;
}
        #box1{
            float:left;
            background-color:#CCC;
}
        #box2{
            float:left;
            background-color:red;
}
</style>
</head>

<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<img id="img1" alt="" src="img/1.jpg">
<div id="msg"></div>

<script type="text/javascript">
var box1Div,msgDiv,img1,box2Div; 
        window.onload = function(){
            box1Div = document.getElementById("box1");
            box2Div = document.getElementById("box2");
            msgDiv = document.getElementById("msg");
            img1 = document.getElementById("img1");
/* box1Div.ondragenter = function(e){
                showObj(e);
            }; */
            box1Div.ondragover = function(e){
                e.preventDefault();//阻止系统的默认事件
            };
            box2Div.ondragover = function(e){
                e.preventDefault();//阻止系统的默认事件
            };
            img1.ondragstart = function(e){
                e.dataTransfer.setData("imgId","img1");//第一个参数指定图片的id，第二个自己设置的图片id
            };
            box1Div.ondrop = dropImgHandle;
            box2Div.ondrop = dropImgHandle;


        };
function dropImgHandle(e){

                showObj(e.dataTransfer);
                e.preventDefault();
//创建节点
var img = document.getElementById(e.dataTransfer.getData("imgID"));
                e.target.appendChild(img);

        }
function showObj(obj){
var s= "";
for(var k in obj){
                s += k+":"+obj[k]+"<br/>";
            }
            msgDiv.innerHTML = s;
        }
</script>
</body>

本地拖拽

<style type="text/css">
        #imgContainer{
            background-color:#CCC;
            width:500px;
            height:500px;
}

</style>
</head>

<body>
<div id="imgContainer"></div>
<div id="msg"></div>


<script type="text/javascript">
var imgContainer,msgDiv;
        window.onload = function(){
            imgContainer = document.getElementById("imgContainer");
            msgDiv = document.getElementById("msg");

            imgContainer.ondragover = function(e){
                e.preventDefault();
            }
            imgContainer.ondrop = function(e){
                e.preventDefault();
var f = e.dataTransfer.files[0];
var fileReader = new FileReader();
                fileReader.onload = function(e){
                    imgContainer.innerHTML = "<img src=\""+fileReader.result+"\">"
                }

                fileReader.readAsDataURL(f);
            };
        };
function showObj(obj){
var s="";
for(var k in obj){
                s +=k+":"+obj[k]+"<br/>";
            }
            msgDiv.innerHTML = s;
        }

</script>
</body>

秒客网

HTML5之表单新增属性

相关文章