整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

第66节 表单按钮下拉选项及表单序列化-Web前端开发之JavaScript

内容是《Web前端开发之Javascript视频》的课件,请配合大师哥《Javascript》视频课程学习。

按钮Button:
按钮是最常用的表单元素之一,有两种形式的按钮,button按钮和radio单选、checkbox复选按钮;
提交和重置元素本身就是按钮,并且有相关联的默认动作,如果其click事件处理程序返回false,也就取消它的默认行为了;也可以使用它们的click事件来执行表单的验证及提交,但最为常用的还是使用form对象本身的submit事件进行验证和提交;
普通按钮是没有默认行为的,一般来说使用它们来执行自定义脚本,当然也可以用它来执行form.submit()方法来提交表单;
对于type为”submit”或type=”image”的按钮,HTML5新增了formaction、formmethod、formenctype、formtarget属性,其中formaction属性用于覆盖form的 action属性,作用是为不同的提交按钮增加formaction属性,使得在单击时可以将表单提交给不同的页面;formmethod属性为每个不同的提交按钮分别指定不同的提交方法;formenctype属性为每个不同的提交按钮分别指定不同的编码方式;formtarget属性用于为每个不同的提交按钮指定在何处打开提交页面;这些属性在Javascript中都有相对应的同名属性,如:

<form action="demo.php">
    <input type="submit" formaction="center/" formmethod="GET" formtarget="_blank" formenctype="multipart/form-data" value="用户中心" />
    <input type="submit" formaction="admin/" formmethod="POST" formaction="_self" formenctype="application/x-www-form-urlencoded" value="后台管理" />
</form>
<script>
var btnSubmit = document.forms[0].elements[0];
console.log(btnSubmit.formAction);
console.log(btnSubmit.formMethod);
console.log(btnSubmit.formTarget);
console.log(btnSubmit.formEnctype);
</script>

radio单选和checkbox复选按钮(框)是开关按钮,其只有两种状态:选中或未选中;

<form id="myForm" name="myForm">
<p>性别:
<input type="radio" name="sex" id="male" value="1" />男
<input type="radio" name="sex" id="remale" value="0" checked />女
</p>
<p>课程:
HTML<input type="checkbox" name="course" id="c1" value="HTML" />
CSS<input type="checkbox" name="course" id="c2" value="CSS" checked />
JavaScript<input type="checkbox" name="course" id="c3" value="JavaScript" />
</p>
</form>
<script>
var male = document.getElementById("male");
console.log(male); // <input>
male = document.forms["myForm"].elements["male"];
console.log(male);  // <input>
</script>

单选和复选按钮都定义了checked属性,该属性为可读写的布尔值;defaultChecked属性对应的是HTML的checked属性,也是布尔值,它指定了元素在第一次加载页面时是否选中;

var male = document.forms["myForm"].elements["male"];
var remale = document.forms["myForm"].elements["remale"];
console.log(male.checked);  // false
console.log(male.defaultChecked);  // false
console.log(remale.checked);  // true
console.log(remale.defaultChecked);  // true
male.checked = true;
console.log(male.checked);  // true
console.log(male.defaultChecked);  // false
console.log(remale.checked);  // false
console.log(remale.defaultChecked);  // true
male.defaultChecked = true;
console.log(male.checked);  // true
console.log(male.defaultChecked);  // true
console.log(remale.checked);  // false
console.log(remale.defaultChecked);  // true

checked会令一个单选按钮组中所有元素互斥,defaultChecked也是可写的(W3C定义其是只读的,所以写入的操作是不规范的),但它不是互斥的;所以可以利用这两个属性把单选按钮恢复到默认的状态,如:

male.checked = true;
male.checked = male.defaultChecked; 
remale.checked = remale.defaultChecked;

对于复选框,也是类似的,但其checked不是互斥的,因为它本身就允许多选;
例如:复位单选和复选状态;

<p><input type="button" value="重置单选和复选" id="resetRadioCheckbox" /></p>
<script>
var resetRadioCheckbox = document.getElementById("resetRadioCheckbox");
resetRadioCheckbox.onclick = function(){
    // var radioList = document.querySelectorAll('input[type="radio"]');
    var radioList = document.getElementsByName("sex"); // 也可以
    console.log(radioList);
    for(var i=0,len=radioList.length; i<len; i++)
        radioList[i].checked = radioList[i].defaultChecked;
    
    var checkList = document.getElementsByName("course");
    for(var i=0,len=checkList.length; i<len; i++)
        checkList[i].checked = checkList[i].defaultChecked; 
}
</script>

单选和复选按钮本身并不显示任何文本,它们通常和相邻的HTML文本一起显示或与<label>元素相关联,所以其value属性并不显示出来,而只是为了提交给服务端;

var radioList = document.getElementsByName("sex");
for(var i=0,len=radioList.length; i<len; i++){
    if(radioList[i].checked)
        console.log("被选中的值是:" + radioList[i].value);
}
var checkList = document.getElementsByName("course");
var checkStr = "";
for(var i=0,len=checkList.length; i<len; i++){
    if(checkList[i].checked)
        checkStr += checkList[i].value + ",";
}
if(checkStr != "")
    checkStr = checkStr.substring(0,checkStr.length - 1);
else
    checkStr = "无";
console.log("被选中的值是:" + checkStr);

同时,也会根据获取来的值来设置单选或复选按钮的选中状态,如:

window.onload = function(){
    var sexValue = 1; // 从服务端获取
    var radioList = document.getElementsByName("sex");
    for(var i=0,len=radioList.length; i<len; i++){
        if(radioList[i].value == sexValue){
            radioList[i].checked = true;
            break;
        }
    }
    var courseValue = "JavaScript,HTML";  // 从服务端获取
    var arrCourse = courseValue.split(",");
    var checkList = document.getElementsByName("course");
    for(var i=0,len=checkList.length; i<len; i++){
        // if(arrCourse.indexOf(checkList[i].value) >= 0) // 或者
        if(arrCourse.includes(checkList[i].value))
            checkList[i].checked = true;
        else
            checkList[i].checked = false;
    }
}

其往往成组并使用共享的name,如果使用共享的name获取这些元素时,返回是一个类数组而不是单个元素;

<script>
var sex = document.getElementsByName("sex");
console.log(sex);  // NodeList
var sex = document.forms["myForm"].elements["sex"];
console.log(sex);  // RadioNodeList
</script>

使用elements集合,返回的类型是更具体的RadioNodeList,该类型拥有一个value属性,返回单选按钮组中选中的value值;该属性是可读写的,在设置value属性时,value属性等于值的第一个单选按钮元素将被设置为checked,如:

console.log(sex.value);  // 0
sex.value = "1";  // 男就被选中的
console.log(sex.value);

radio单选按钮的本意就是在一组单选按钮组中只能选择唯一一个,如果只有一个radio按钮,是没有多大实际意义的;即使如此,如果使用elements属性,其返回的就不是NodeList,而是单个元素对象;

<p><input type="radio" id="single" name="single" value="单个按钮" /></p>
</form>
<script>
var single = document.forms[0].elements["single"];
console.log(single);  // <input>
single.checked = true;
console.log(single.checked);
console.log(single.defaultChecked);
console.log(single.value);  // 单个按钮
</script>

在获取checkbox时,如:

var courses = document.getElementsByName("course");
console.log(courses);  // NodeList<input>
var courses = document.forms["myForm"].elements["course"];
console.log(courses); // RadioNodeList<input>

虽然当前为checkbox组,并不是radio组,但返回的也是RadioNodeList,并不是类似的CheckboxNodeList类型,而且也不存在这个类型;
其返回的RadioNodeList集合的value属性无用;获取所有选中复选按钮的值,可以遍历所有被选中的选项;

当单击单选或复选按钮时,会触发onclick事件,如果单击时改变了开关按钮的状态,也会触发change事件;

var sexList = document.forms[0].elements["sex"];
for(var i=0,len=sexList.length; i<len; i++){
    var sex = sexList[i];
    sex.addEventListener("change", function(event){
        console.log(event.target.checked);
        console.log(event.target.defaultChecked);
    });
}
var courseList = document.forms[0].elements["course"];
var log = document.getElementById("log");
var arrCourse = [];
for(var i=0,len=courseList.length; i<len; i++){
    if(courseList[i].checked)
        arrCourse.push(courseList[i].value);
}
console.log(arrCourse.join());
log.innerText = arrCourse.join();
for(var i=0,len=courseList.length; i<len; i++){
    var course = courseList[i];
    course.addEventListener("change", function(event){
        if (event.target.checked) {
            arrCourse.push(event.target.value);
        }else{
            arrCourse.splice(arrCourse.indexOf(event.target.value),1);
        }
        console.log(arrCourse.join());
        log.innerText = arrCourse.join();
    },false);
}

示例:全选:

<p>
HTML<input type="checkbox" name="course" value="HTML" />
CSS<input type="checkbox" name="course" value="CSS" />
JavaScript<input type="checkbox" name="course" value="JavaScript" />
</p>
<p><button id="all">全选</button>
    <button id="not">全不选</button>
<button id="reverse">反选</button></p>
<script>
var chkBoxs = document.getElementsByName("course");
// 全选
var all = document.getElementById("all");
all.onclick = function(){
    for(var i=0; i<chkBoxs.length; i++){
        chkBoxs[i].checked = true;
    }
}
// 全不选
var not = document.getElementById("not");
not.onclick = function(){
    for(var i=0; i<chkBoxs.length; i++){
        chkBoxs[i].checked = false;
    }
}
// 反选
var reverse = document.getElementById("reverse");
reverse.onclick = function(){
    for(var i=0; i<chkBoxs.length; i++){
        chkBoxs[i].checked = !chkBoxs[i].checked;
    }
}
</script>

示例:同意提交

<div id="content">
<p>Lorem ...</p>
</div>
<p><label>同意此协议</label><input type="checkbox" id="cbAgree" disabled /></p>
<input type="submit" value="提交" id="btnSubmit" disabled />
<script>
window.onload = function(){
    var cbAgree = document.getElementById("cbAgree");
    var btnSubmit = document.getElementById("btnSubmit");
    var s = 5;
    var timer = setInterval(function(){
        btnSubmit.value = "等待" + s + "秒";
        if(--s < 0){
            clearInterval(timer);
            btnSubmit.value = "提交";
            cbAgree.disabled = false;
        }
    },1000);
    cbAgree.addEventListener("change", function(event){
        btnSubmit.disabled = !cbAgree.checked;
    },false);
}
</script>

Label标签元素:
其与其它表单元素关联,关联的方式有两种:一是使用for属性,二是将<input>直接嵌套在<label>中,在这种情况下,不需要for和id属性,因为关联是隐式的;
表单的elements集合中并不包括Lable;

Label属性:

  • form:只读,是一个HTMLFormElement对象,表示与其关联的Form;如果没有关联Form,则为null;
  • control:只读,表示与标签关联的表单元素;
  • htmlFor:可读可写,是一个字符串,表示与其关联的表单元素的ID,与其HTML的for属性对应;
var label = document.getElementsByTagName("label")[1];
console.log(label);
console.log(label.form);
console.log(label.control);
console.log(label.htmlFor);
label.htmlFor = "c2";
console.log(label.control);  // checkbox
console.log(label.htmlFor);  // c2

表单元素的labels属性:只读,返回表单元素关联的所有<label>元素的NodeList,如:

<p><label for="content">内容:</label><br/>
<textarea id="content" name="content"></textarea><br/>
<label for="content">请输入简要的内容</label></p>
</form>
<script>
var content = document.forms["myForm"].elements["content"];
console.log(content.labels);  // NodeList(2)
var label = content.labels[0];
console.log(label);  // label
console.log(label.textContent);  // 内容:
console.log(label.form);  // <form>
console.log(label.control);  // textarea#content
console.log(label.htmlFor);  // content
</script>

select选择框:
选择框是通过<select>和<option>元素创建的,其属于HTMLSelectElement类型,浏览器通常将其渲染为下拉菜单的形式或设置其size属性大于1呈现为列表的形式;

<form id="myForm" name="myForm">
<select name="province" id="province">
    <option value="beijing" label="大北京">北京</option>
    <option>安徽</option>
    <option value="jiangsu">江苏</option>
    <option value="guangdong">广东</option>
    <option value="shangdong">山东</option>
</select>
</form>

其拥有除了所有表单元素共有的属性和方法外,还提供了:

  • size :选择框中可见的行数;等价于HTML中的size特性;
  • multiple:布尔值,表示是否允许多选;等价于HTML中的multiple特性;
  • type:值为”select-one”或”select-multiple”,取决于HTML代码中有没有multiple特性;
  • options:控件中所有<option>元素的HTMLCollectoin;
  • selectedIndex:选中项的索引,如果没有选中项,为0;对于多选,只保存选中项中第一项的索引;
  • selectedOptions:表示所选中<option>元素集的HTMLCollection;
  • add(newOptoin, relOption):向<select>中插入新<option>元素,其位置在指定项relOption之前;
  • remove(index):移除给定位置的<option>选项;
  • length:返回<option>数量;
  • value:由当前选中项决定:如果没有选中的项,则为空字符串;如果有一个选中项,而且该项的value特性已经在HTML中指定,就等于该option的value值,即使该value是空字符,也是如此;如果有一个选中项,但该项的value特性在HTML中未指定,则该value等于该项的文本(text);如果有多个选中项,取得第一个选中项的值;当其type为select-one和select-multiple时,其选择的行为是不一样的,如果为select-multiple,允许多选,但此时,其value返回的是第一个option的value值;
  • options属性,其返回包含了多个Option元素的HTMLOptionsCollection集合,如:
var province = document.forms[0].elements["province"];
console.log(province.options);  // HTMLOptionsCollection

该集合拥有length、selectedIndex属性和add()及remove()方法;其中selectedIndex返回的是选中项的索引;通过options的索引可以返回一个option对象;

console.log(province.options.selectedIndex);  // 2
console.log(province.selectedIndex);  // 2
console.log(province.options[1]);  // <option>

通过select对象的item(index)方法或select的索引也可以返回一个option对象;

var opt = selectbox.item(1);
var opt = selectbox[1];
console.log(opt);
console.log(opt.index);
console.log(opt.text);

每个<option>元素属于HTMLOptionElement类型,该类型继承自成 HTMLElement,其拥有下列属性:

  • index:当前项在options集合中的索引;
  • form:只读,其所属的form,与其所在的HTMLSelectElement 对象的form属性一致;
  • label:当前选项的Label属性;如果没有此属性,则返回元素的text;
  • selected:布尔值,表示当前选项是否被选中;将这个属性设置为true可以选中当前选项;
  • defaultSelected:对应其HTML的selected特性的初始值;
  • text:选项显示的纯文本字符串;
  • value:选项的值;等价于HTML中的value特性,即提交给服务端的文本;

设置这些属性的目的,是为了方便对选项数据的访问,虽然可以使用常规的DOM功能来访问这些信息,但效率比较低:

var province = document.forms[0].elements["province"];
// 不推荐
// var text = province.options[0].firstChild.nodeValue;
var text = province.options[0].textContent; // 或
var value = province.options[0].getAttribute("value");
console.log(text, value);
// 推荐
var text = province.options[0].text;
var value = province.options[0].value;
console.log(text, value);
console.log(province.options[0].index);
console.log(province.options[0].selected);
console.log(province.options[0].label);
province.options[2].selected = true;
// options[1]没有value,所以返回其text
console.log(province.options[1].value);

在未指定value特性的情况下,IE7会返回空字符串,其他会返回与text特性相同的值;

<opggroup>:
<optgroup>HTML元素在<select>元素中创建一组选项,其属于HTMLOptGroupElement类型,属性为:
disabled:是一个布尔值,表示整个子项列表<option>是否已禁用(true)或未禁用(false);
label:表示组label属性;

<form>
<select id="selectbox">
    <optgroup label="前端" disabled>
        <option>HTML</option>
        <option>CSS</option>
        <option>JavaScript</option>
    </optgroup>
    <optgroup label="后端">
        <option>C#</option>
        <option>Java</option>
        <option>PHP</option>
    </optgroup>
</select>
<script>
var selectbox = document.getElementById("selectbox");
var optgroup = selectbox.getElementsByTagName("optgroup")[0];
console.dir(optgroup);  // HTMLOptGroupElement
console.dir(optgroup.label);  // 前端
</script>

选择选项:
对于只允许选择一项的选择框,最简单的方式就是直接使用selectedIndex属性,利用此属性既可以获取选中的项,也可设置某个项被造中;如:

var selectedIndex = province.selectedIndex;
var selectedOption = province.options[selectedIndex];
console.log("选中项的索引:" + selectedIndex + ",text" + selectedOption.text + ",value:" + selectedOption.value);
province.selectedIndex = 1;  // 根据索引设置选中项
var selectedIndex = province.selectedIndex;
var selectedOption = province.options[selectedIndex];
console.log("选中项的索引:" + selectedIndex + ",text" + selectedOption.text + ",value:" + selectedOption.value);

对于multiple多项的选择,单个selectedIndex属性不足以表示被选中的多个选项,即使选中多个,读取则只会返回选中项第一项的索引值且其value值也是第一个选中的Option的value值;

selected属性:另一种选择选项的方式,即取得某一项的引用,然后将其selected属性设置为true;

console.log(province.options[0].selected); // false
console.log(province.options[2].selected); // true
province.options[0].selected = true;
province.options[1].selected = true;

与selectedIndex不同的是,在允许多选的选择框中设置选项的selected属性,不会取消对其他选中项的选择,因而可以动态选中任意多个项;但如果是在单选择框中,会取消对其他选择的选择;

selected属性的作用主要是确定用户选择了选择框中的哪些项;要取得所有选中的项,可以遍历Options选项集合,逐个测试每个选项的selected属性:

var province = document.forms[0].elements["province"];
function getSelectedOptions(selectbox){
    var result = new Array();
    var option = null;
    for(var i=0, len=selectbox.options.length; i<len; i++){
        option = selectbox.options[i];
        if(option.selected){
            result.push(option);
        }
    }
    return result;
}
var province = document.forms[0].elements["province"];
var selectedOptions = getSelectedOptions(province);
var msg = "";
for(var i=0,len = selectedOptions.length; i<len; i++){
    msg += "index:" + selectedOptions[i].index + ",text:" + selectedOptions[i].text + ",value:"+ selectedOptions[i].value  + ";";
}
console.log(msg);

selectedOptions属性:只读属性,其返回当前选定的<option>元素的HTMLCollection;

console.log(province.selectedOptions); // HTMLCollection

如果是select-one单选,其中包含一个option,如果是select-mutiple多选,就包括所有选定的option;
例如:获取所有选中项

<label for="foods">你喜欢吃什么?</label><br>
<select id="foods" name="foods" size="7" multiple>
    <option value="1">苹果</option>
    <option value="2">香蕉</option>
    <option value="3">桔子</option>
    <option value="4">披萨</option>
    <option value="5">西红柿</option>
</select>
<br>
<button name="order" id="order">确定</button>
<p id="output"></p>
<script>
var orderButton = document.getElementById("order");
var itemList = document.getElementById("foods");
var outputBox = document.getElementById("output");
orderButton.addEventListener("click", function() {
    var collection = itemList.selectedOptions;
    var output = "";
    for (var i=0; i<collection.length; i++) {
        if (output === "") {
            output = "你喜欢吃的食物如下:";
        }
        output += collection[i].text;
        if(i === (collection.length - 2) && (collection.length < 3))
            output +=  "和";
        else if(i < (collection.length - 2))
            output += ",";
        else if(i === (collection.length - 2))
            output += "和";
    }
    if(output === "")
    output = "你啥也不喜欢";
    outputBox.innerHTML = output;
}, false);
</script>

添加选项:
可以动态添加选项,并将它们添加到选择框中;有多种添加的方式:
第一种:使用DOM方法:

var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("天津"));
// newOption.setAttribute("value", "tianjin");
newOption.value = "tianjin";
selectbox.appendChild(newOption);

第二种:使用Option构造函数来创建新选项:
语法:var option = new Option(text?, value?, ?defaultSelected, ?selected);参数text和value分别设置Option对象的text和value;后两个参数,分别设置option的defaultSelected和selected属性,4个参数均为可选;其会返回一个<option>元素;

var newOption = new Option("上海", "shanghai");
selectbox.appendChild(newOption);
newOption = new Option("四川","sichuan",true,true);
selectbox.appendChild(newOption);
newOption = new Option();
newOption.text = "贵州";
newOption.value = "guizhou";
newOption.label = "美丽贵州";
newOption.selected = true;
selectbox.appendChild(newOption);

IE7以下不可用,因为它不能正确设置新选项的text属性;

第三种:使用选择框的add()方法:
语法:select.add(option[, before);其接受两个参数:要添加的新选项option和将位于新选项之后的选项before;before即可以是一个option也可以是选项的索引;before为可选,如果要在列表的最后添加选项,应该将第二个参数设置为null、undefined或者不设;如:

var newOption = new Option("上海", "shanghai");
selectbox.add(newOption, selectbox.options[1]); // 第2个位置
selectbox.add(newOption, 1); // 第2个位置
selectbox.add(newOption, null); // 最后位置
selectbox.add(newOption, undefined); // 最后位置
selectbox.add(newOption, 100); // 最后位置
selectbox.add(newOption); // 最后位置

如果将新选项添加到任意位置,使用DOM技术和insertBefore()方法也可以;

第四种,使用options属性也可以把新的option添加到选择框中,或者使用表单索引,如:

var newOption = new Option("上海", "shanghai");
selectbox.options[selectbox.options.length] = newOption; // 或者
selectbox[selectbox.options.length] = newOption;
// 如,添加多个
var arrOptions = ['重庆','云南','广西'];
arrOptions.forEach(function(v,i){
    selectbox[selectbox.options.length] = new Option(v);
});
// 或
arrOptions = [
    {text: "重庆", value: "chongqing"},
    {text: "云南", value: "yunnan"},
    {text: "广西", value: "guangxi"}
];
arrOptions.forEach(function(v,i){
    selectbox[selectbox.options.length] = new Option(v.text, v.value);
});

移除选项:
移除选项也有多种方式:首先可以使用DOM的removeChild()方法,为其传入要移除的选项;其次可以使用选择框的remove()方法,为其传入要移除选项的索引;最后,可以将相应选项设置为null;

selectbox.removeChild(selectbox.options[1]);
selectbox.remove(2);
selectbox.options[2]=null;
// 如果不带参数,会删除selectbox本身
selectbox.remove();

移除选择框中所有的项,可以迭代所有选项并逐个移除:

function clearSelectbox(selectbox){
    for(var i=0,len=selectbox.options.length; i<len; i++){
        selectbox.remove(0);
    }
}
clearSelectbox(selectbox);

使用options属性也可以移除全部或某个选项,

selectbox.options[1] = null;  // 移除第2个
selectbox.options.length = 2; // 截断,只保留2个
// selectbox.options.length = 0; // 移除所有
selectbox.length = 0; // 移除所有

移动选项:
将一个选择框中的选项移动到另一个选择框中,使用DOM的appendChild()方法,因为使用appendChild()方法并传入一个已存在的元素,那么就会先从该元素的父节点中移除它,再把它添加到新的指定的位置;

var selectbox1 = document.getElementById("selLocation1");
var selectbox2 = document.getElementById("selLocation2");
selectbox2.appendChild(selectbox1.options[1]);

移动和移除选项有一个共同之外,即会重置每一个选项的index属性;

<h3>移动选项</h3>
<select name="sel1" id="sel1" size="8" multiple>
    <option value="">唐</option>
    <option value="">宋</option>
    <option value="">元</option>
    <option value="">明</option>
    <option value="">清</option>
</select>
<button id="toRight">>></button>
<button id="toLeft"><<</button>
<select name="sel2" id="sel2" size="8" multiple>
    <option value="">秦</option>
    <option value="">汉</option>
    <option value="">三国</option>
    <option value="">两晋</option>
    <option value="">南北朝</option>
</select>
<script>
var sel1 = document.getElementById("sel1");
var sel2 = document.getElementById("sel2");
var toRight = document.getElementById("toRight");
var toLeft = document.getElementById("toLeft");
toRight.onclick = function(){
    var options = sel1.selectedOptions;
    for(var i=options.length-1; i>=0; i--){
        sel2.appendChild(options[i]);
    }
};
toLeft.onclick = function(){
    var options = sel2.selectedOptions;
    for(var i=options.length-1; i>=0; i--){
        sel1.appendChild(options[i]);
    }
}
</script>

重排选项:
重排选项的次序,最好的方式也是DOM方法,如appendChild()适合将选项添加到选择框的最后,insertBefore()可以将选项移动到指定位置,如:

var optionToMove = selectbox.options[1];
// 向上移一下
selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index - 1]);
// 向下移一下
selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index + 2]);

select的事件:
选择框的change事件与其他表单控件的change事件触发的条件不一样,其他控件的change事件是在值被修改且焦点离开时触发,而选择框的change事件只要选中了选项就会触发;
选择不同的选项时,也会触发input事件,如:

selectbox.addEventListener("change", function(event){
    console.log(event.target.selectedIndex);
});
function inputHandler(e){
    console.log(e.target.value);
}
selectbox.addEventListener("input", inputHandler);

示例:跳转

<select id="links">
    <option value="https://www.zeronetwork.cn">零点网络</option>
    <option value="https://cn.bing.com">Bing</option>
    <option value="https://www.apple.com">苹果</option>
</select>
<script>
var links = document.getElementById("links");
links.addEventListener("change", function(event){
    location.href = event.target.options[event.target.selectedIndex].value;
});
</script>

表单序列化:
随着Ajax的出现,表单序列化已经成为一种常见需求;在Javascript中,可以利用表单元素的type属性,连同name和value属性一起实现对表单的序列化;
浏览器把数据发送给服务器原理:

  • 对表单字段的名称和值进行URL编码,使用和号(&)分隔;
  • 不发送禁用的表单字段;
  • 只发送勾选的复选框和单选按钮,并且复选框中的每个选中的值单独一个条目;
  • 不发送type为”reset”和”button”的按钮;
  • 多选选择框中的每个选中的值单独一个条目;

如:表单简单序列化;

var btn = document.getElementById("btn");
btn.addEventListener("click", submitHandler, false);
function submitHandler(event){
    var myForm = document.forms[0];
    var username = myForm.elements["username"].value;
    var userpwd = myForm.elements["userpwd"].value;
    var sex = myForm.elements["sex"].value;
    var courseValue = [];
    var courseList = myForm.elements["course"];
    for(var i=0, len=courseList.length; i<len; i++){
        if(courseList[i].checked)
            courseValue.push(courseList[i].value);
    }
    var params = "username=" + username +
                "&userpwd=" + userpwd +
                "&sex=" + sex +
                "&course=" + courseValue;
    console.log(params);
}

如:通用序列化:

function serialize(form){
    // 后面要用到的变量
    var params = new Array();
    var field = null,
        i, j, len,
        optLen,
        option,
        chkObj = {};
        
    for(i=0, len=form.elements.length; i<len; i++){
        field = form.elements[i];
        switch(field.type){
            // 如果是select,包含单选和多选
            case "select-one":
            case "select-multiple":
                arrOpt = [];
                for(j=0, optLen=field.options.length; j<optLen; j++){
                    option = field.options[j];
                    if(option.selected){
                        arrOpt.push(encodeURIComponent(option.value));
                    }
                }
                arrOpt = arrOpt.join(",");
                params.push(encodeURIComponent(field.name) + "=" + arrOpt);
                break;
            // 如果是fieldset、file、submit、reset、button不提交
            case undefined: //字段集
            case "file":    //文件域
            case "submit":  //提交
            case "reset":   //重置
            case "button":  //按钮
                break;
            // 如果是单选或复选框
            case "radio":
            case "checkbox":
                if(field.checked){
                    if(chkObj[field.name])
                        chkObj[field.name].push(encodeURIComponent(field.value));
                    else
                        chkObj[field.name] = [encodeURIComponent(field.value)];
                }
                break;
            default:
                // 如果没有名字的表单元素,不提交
                if(field.name.length)
                    params.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
        }
    }
    for(var o in chkObj){
        params.push(encodeURIComponent(o) + "=" + chkObj[o].join(","));
    }
    return params.join("&");
}
// 应用
var btn = document.getElementById("btn");
btn.addEventListener("click", submitHandler, false);
function submitHandler(event){
    var myForm = document.forms[0];
    var params = serialize(myForm);
    console.log(params);
}

无刷新提交(局部刷新):

<script>
function saveUserInfo(){
    var msg = document.getElementById("msg");
    var form = document.forms[0];
    // 提交地址
    var url = "./demo.php"; 
    // POST的值,把每个变量都通过&来联接
    var postStr = serialize(form);
        
    // XmlHTTP
    var XmlHTTP;
    if(window.XMLHttpRequest) {
        XmlHTTP = new XMLHttpRequest();
    }else if(window.ActiveXObject) {
        XmlHTTP = new ActiveXObject("Microsoft.XMLHTTP");
    }
    XmlHTTP.open("POST", url, true);
    //定义传输的文件HTTP头信息
    XmlHTTP.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    XmlHTTP.send(postStr); //发送POST数据
    //获取执行状态
    XmlHTTP.onreadystatechange = function() {
        //如果执行状态成功,那么就把返回信息写到指定的层里
        if (XmlHTTP.readyState == 4 && XmlHTTP.status == 200) {
            msg.innerHTML = XmlHTTP.responseText;
        }
    }
}
</script>
<div id="msg"></div>
<form name="userinfo" method="post" action="">
    姓名:<input type="text" id="username"name="username" /><br />
    年龄:<input type="text" name="age" /><br />
    性别:<input type="text" name="sex" /><br />
    <input type="button" value="提交表单" onClick="saveUserInfo()">
</form>

demo.php:

<?php
$username = $_POST['username'];
$age = $_POST['age'];
$sex = $_POST['sex'];
echo "$username <br>";
echo "$userage <br>";
echo "$usersex <br>";
// 链接数据库,并保存到数据库,$result为执行结果
$result = true;
if ($result){
    echo "提交成功!";
}
else {
    echo "提交失败!";
}
?>

整合:saveUserInfo()中换成:

    // 提交地址
    var url = "./demo.php"; 
    // POST的值,把每个变量都通过&来联接
    var postStr = serialize(form);

submitHandler()事件处理函数:

言:万物之始,大道至简,演化至繁。水滴不染尘世浮华,方能纯净如冰川灵动如丝绒。落红不逐春日绚烂,方有一年春尽一年春。

一、html5的介绍

1.1介绍

html号称超文本标记语言,代表着浏览器技术发展的一个阶段。html版本1到版本5的更新迭代都是由组织W3C管理的。当时到html4.1的时候,W3C组织就声称不再更新版本了。而改用XHTML。但是由于浏览器的各种不兼容的问题,于是乎W3C这个组织就和其他的浏览器产商一起联合起来将这门语言再次更新到html5

比喻:

html5 >机器人的骨骼

css3 >机器人的外在修饰

js > 机器人的行为如行走、抬腿

Jquery > 封装好的控制行为的库,可以提高效率

1.2优势

  • 易用性

  • 支持视频和音频

  • 互动性高

  • 支持移动设备

  • 未来的趋势

1.3开发工具

HBuild、WebStrom、sublime Text

二、代码规范

2.1代码规范

新建一个Web项目

相比html4来说,html5的语法更加简洁并且在规定上也更加宽松。

  • 单标签不用写关闭符号

  • 双标签省略结束标签

  • html、head、body、colgroup、tbody可以完全省略

  • 删除其中一些,打开浏览器的检查元素功能,也不会报错

三、各类标签

3.1文本标签

  • b标签:表示关键字和产品名称。<b>html</b>其实它的实际作用就是将一段文字加粗。但是并不是特别强调它的重要性。比如说:在一段文字当中出现的某些关键字或者产品的名称就可以用b标签

  • strong标签:表示比较重要的文字<strong>html</strong>它的作用也是加粗,只是它在强调一段比较重要的文本

  • br单标签:换行

  • wbr标签:安全换行you've no idea how worried <wbr> i was当用户对网页进行缩放的时候可能会有一些单词被挤到下一行。如果不行某个单词被分离的话,可以使用安全换行标签

  • i标签:倾斜。em标签语义一样,但em表示强调<i>倾斜标签</i>它用于表示外文词汇或科技术语

  • s标签:删除线。del标签表示强调。<s>html</s>删除线

  • u标签:给文字加下划线。ins标签表示强调<u>html</u>下划线

  • small标签:添加小号字体<small>放小一号</small>将文本放小一号。通常用于免责声明和澄清声明。

  • sub和sup标签:添加上标和下标X<sub>5</sub>和Y<sup>2</sup>(sub和sup长差不多,这个要如何去记忆呢?大家可以看到b的肚子在下面,所以呢它是下标,而p的头部在上方,所以记录是上标。那这样一来是不是就感觉清晰了许多呢)

  • q标签:引用来自其它出处的内容<q>有朋自远方来</q>

  • ruby标签:语言元素。常用于帮助读者正确发音。<ruby>夔<rp>(</rp><rt>kui</rt><rp>)</rp></ruby><rp><rt>用来帮助读者掌握表意语言文字的正确发音。比如说汉语拼音在文字的上方。

  • bdo标签:设置文字方向<bdo dir="rtl">设置文字方向</bdo>dbo必须使用属性dir才可以设置,一共两个值:rtl从右到左和ltr从左到右。一般默认是ltr。还有一个bdi元素也是处理方向的,由于是特殊语言的效果,并且主流浏览器有些不支持,所以可以忽略。

  • mark标签:突出显示文本<mark>突出显示文本</mark>加上一个黄色的背景,黑色的字。从语义上来看,与上下文相关而突出的文本,用于记号。

  • a标签:超链接a元素属于文本元素,有一些私有属性。

    href属性 <a href="http://www.baidu.com">百度</a> 这个属性是必须的,否则a元素就变得毫无意义。它的属性值意味着点击跳转到指定的外部网站去。

    target属性<a href="http://www.baidu.com" target="_blank">百度</a> 这个属性告诉浏览器希望打开的新窗口显示在哪里。_blank表示在新窗口中打开文档。_self表示在当前窗口打开文档。默认_self。(_parent和_top这些要结合框架来使用,但是基本上用得已经很少了。)

    锚点设置:用于将同一个文档中的另一个元素移入视野。说通俗一点就是通过点击这个锚点定位到页面中的某个位置。

<a href="#1">第一节</a>

<a href="#2">第二节</a>

<a href="#3">第三节</a>

</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

<a name="1">第一节的内容 我☝应该说点啥的。

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

</a>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

&hellip;&hellip;以上省略一万行&hellip;&hellip;

==========以下全都是分隔符============</br>

<a name="2">第二节的内容 我☝应该说点啥的。

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

</a>

3.2分组标签

顾名思义,分组元素就是用来组织相关内容的html元素,对它们进行清晰有效的分类。

  • p标签:表示段落<p>这是一个段落</p> <p>这是一个段落</p>p标签就是将内部包含的文本形成一个段落。它们可以自动换行,而且段落与段落之间保持一定量的空隙。

  • div标签:通用分组<div>这是一个块标签</div> <div>这是另一个块标签</div>在早期的版本中经常用到,用div将其他数据或标签包裹起来,进而进行布局。但是在html5中,渐渐被其他元素替代。(它与p标签的区别就是两段文本间没有空隙。空隙间隔和br标签换行一样)

  • blockquite标签:引用大段其他地方的内容<blockquote>引用别人的内容的辅导费打发打发可以换行哦他也有首尾缩进的效果</blockquote>有段落空隙的功能,还包含了首尾缩进的功能。

  • pre标签:按照原格式展示数据<pre> 我就是 长这样的 参差不齐 </pre>(有时候某些文字就想要按照原来的格式显示出来就要用到pre标签。它就是将数据原封不动的显示出来)

  • hr标签:单标签。添加一条分割线。

  • ul和li标签:添加无限列表

<ul>

<li>貂蝉</li>

<li>大乔</li>

<li>小乔</li>

<li>孙尚香</li>

</ul>

ul标签表示无序列表(就像咱们平时说的无符号整形,在前面也是加了一个u),而li标签则表示内部的列表项

  • ol和li:表示有序列表

  • start属性:表示从第几个序列开始统计。<ol start="2">

  • reversed属性:是否倒序排列。<ol reversed>(不过这个属性有很多的浏览器不支持,所以要谨慎使用)

  • type属性:表示列表的编号的类型 <ol type="A">

  • value属性:这是属于li的属性。表示强行设置某个项目的编号。<li value="7">安琪拉</li>

  • dl、dt、dd:列表标签

<dl>

<dt>第一份内容</dt>

<dd>第一行详细内容</dd>

<dd>第二行详细内容</dd>

<dl>

虽然说这三个标签是一个整体,但是dt和dd标签并非都必须出现

  • figure和figcaption标签:使用插图的意思。一般用于图片的布局。

<figure>

<figcaption>这里有一张图哦</figcaption>

<img src="img.png">

</figure>

3.3表格标签

表格的用途是以网格的形式显示二维数据。开发者可以对表格中的元素标签设置不同的属性如边框宽度、颜色等使表格呈现出不同的效果。

3.3.1 标签

  • table:表示表格标签

  • tr:代表某一行

  • td:代表一个单元格。

<table border="1" style="width:300px;">

<tr> <!--相当于行-->

<td>王昭君</td> <!--相当于每行中的每一列-->

<td>沉鱼落雁</td>

<td>法师</td>

</tr>

<tr> <!--相当于行-->

<td>貂蝉</td> <!--相当于每行中的每一列-->

<td>羞花闭月</td>

<td>刺客</td>

</tr>

</table>

  • th:代表标题单元格。代表标题,作用是将内部文字居中且加粗。

<tr>

<th>姓名</th>

<th>特征</th>

<th>职业</th>

</tr>

  • thead:代表表头。(某些时候,网页上的表头是由js动态生成的。有可能没按照先后的顺序排列,如此一来表头就有可能显示到第二行、第三行甚至是表尾。用thead将tr括起来可以让数据永远显示在第一行)

<thead>

<tr>

<th>姓名</th>

<th>特征</th>

<th>职业</th>

</tr>

  • tfoot:表示表尾:与表头相反

  • tbody:表示表格的主体部分

  • (这里非常建议用分主体、表头、表尾的方式写。因为到后期使用CSS样式的时候只要拿到某个标签就可以设置总体的样式了,这样就会非常方便)

  • caption:添加表格的标题

  • colgroup:群组。用于设置列的属性。默认设置第一个(有的时候需要设置单独列的属性,如果说我只想设置第二列的属性,则需要把第一列的设置成白色)

<!--<table border="1" style="width:300px;">-->

<colgroup style="background:white;" span="1"></colgroup> <!--设置第一个颜色为白-->

<colgroup style="background:red;" span="1"></colgroup> <!--设置第二个颜色为红 span代表一列-->

  • col:群组的子标签。更加灵活的设置列属性。通过占位符设置不需要的属性。

<colgroup>

<col> <!--占位,表示第一列不设置-->

<col style="background: pink;">

</colgroup>

3.3.2属性

  • border:表示边框的宽度 <table border="1"></table>

  • style:通用属性。在css中做详解。

  • colspan:合并列 <td colspan="3">统计</td>这句代码表示共占三个单元格

  • rowspan:合并行

<tr>

<th rowspan="4">学员</th>

<th>姓名</th>

<th>特征</th>

<th>职业</th>

</tr>

3.3文档元素

文档元素的主要作用是划分各个不同的内容,让整个布局更加清晰。 进入代替div。让整个布局元素都具有语义。

  • header标签:表示页面头部。通常包括标题或导航等内容。下面内容会换行(在页面中一般会用样式将它设置到居中)

  • footer标签:表示页面的尾部,一般用于版权声明、友情链接等。

  • h1-h6标签:标题标签,有字体加粗的效果。从1-6字号依次减小

<h1>这里是一个大标题</h1> <h3>这里是一个副标题</h3>

  • hgroup:组合标题。hgroup的作用就是当多个标题出现,干扰到一对或多个本身需要整合的标题。

<header>

<hgroup>

<h1>这里是一个大标题</h1>

<h3>这里是一个副标题</h3>

</hgroup>

</header>

<footer>

<h4>这里是尾部的副标题</h4>

这里存放页面的尾部:如版权声明,友情链接

</footer>

如上面那段代码,头部的h4标题就能与h1绑定起来,从而和尾部的h4分离。

  • section标签: 定义一个文档的主题内容

  • nav标签: 给文档页面添加一个导航

  • aritcle标签:添加一个独立成篇的文档(像平常看到的论坛,贴吧,评论都有自己的头、尾和内容等)

<article>

<header>

<nav>&hellip;&hellip;</nav>

</header>

</article>

  • aside标签:生成注释栏。

<aside>这是一个注释栏</aside>

  • address表示文档或者是article元素的联系信息

  • <address>联系信息</address>

  • 本身有倾斜的效果。如果是在article元素下表示其下的联系信息,如果是在body元素下表示整个文档的联系信息

3.4嵌入元素

嵌入元素主要功能是把外部的一些资源插入到html中。

  • img标签:用于显示图片

  • src:嵌入图像的url

  • alt:(如果图片能正常显示则没有任何效果。若图片加载不成功会出现备用内容)

  • width/height:定义图片的宽度和高度,单位是像素<img src="img.png" alt="风景图" width="320" height="400"/>

  • ismap:获取到图片区域的像素点加入了ismap属性之后,点击图片在浏览器中就会获得图片被点击的地方的像素点。(把文件在目录中打开,讲文件拷贝到谷歌浏览器打开就能看见)

<a href="index.html">

<img ismap src="img_5.jpg" alt="风景图">

</a>

  • usemap:创建分区的响应图。比如说点击图片的某一部分,可以跳转到某一个网页。(当点击了coords这块区域时,跳转到指定的网页)

<img src="img_5.jpg" usemap="#Map" />

<map name="Map">

<area shape="circle" coords="31,28,112,100" href="http://www.baidu.com" target="_blank" alt="方形">

</map>

  • iframe标签:嵌入另一个文档。表示在一个页面内建立一个区域引入另一个页面。

<a href="index.html" >index</a>

<a href="http://www.baidu.com" target="in">百度</a>

<iframe src="http://www.baidu.com" width="300" heigth="300" name="in"></iframe>

  • progress标签:用于显示进度

  • 该标签会产生一个进度条,一般我们会用js代码来控制其内部的值。(当前值用value来表示,而最大值用max来表示)

<progress value="30" max="100"></progress>

  • meter标签:显示范围里的值(类似于进度条,可以规定最大值和最小值max/min。low值规定它的值过低,high表示值过高。而optimun表示最佳值,但是这个属性是呈现不出效果的)

<meter value="90" min="10" max="100" low="40" high="80" optimum="60"></meter>

3.5音频和视频标签

音频和视频文件其实都只是一个容器文件。视频文件包含了音频轨道、视频轨道和其他一些元数据。视频播放时,音频轨道和视频轨道是绑定在一起的。元数据包含了视频的封面、标题字幕等信息。在网页实现中,有很多的浏览器厂商都有自己的标准,所以html5规范也没有强制指定编解码器了。所以在网页上嵌入视频和音频时,最好提供mp4格式和webM格式的视频。否则有可能由于浏览器不兼容的问题导致视频不能播放。

  • video标签: 视频标签属性:

  • src:视频资源的url

  • width:视频宽度

  • height:视频高度

  • <video src="test.mp4" width="320" height="400"></video>

  • controls:设置后显示播放控件(未设置这个属性时,视频就像一张图片,设置controls之后才能显示视频播放控件)

  • <video src="test.mp4" width="320" height="400" controls></video>

  • autoplay:表示立即播放视频

  • loop:反复播放视频(也就是说在播放结束之后会重新播放视频)

  • muted:设置之后,视频会处于静音状态

  • poster:指定视频数据载入时显示的图片。(相当于视频的一个封面)

<video src="test.mp4" width="320" height="400" controls

poster="img_5.jpg"></video>

  • preload:预加载。不设置会在第一次播放自动缓存。如果值为none会直到用户点击时再加载视频。如果值为metadata表示播放之前只加载第一帧。auto是默认的,表示要求浏览器尽快的加载视频。

  • 兼容多个浏览器 source标签

<video src="test.mp4" width="320" height="400" controls poster="img_5.jpg">

<source src="test.webm"/>

<source src="test.mp4"/>

</video>

  • audio标签:用于嵌套音频内容。属性与视频元素类似。只是没有宽高设置和图片。

  • <audio src="test.mp3" controls></audio>

3.6表单标签

表单标签是用于获取用户的输入数据的。

  • form标签:表示定义html表单。用该标签包含的标签具有提交功能。也就是说,在浏览器的地址栏里面能获取到用户的信息。(如果不定义表单,那么它是无法提交数据的)

<form>

用户名:<input name="user">

<button>提交</button>

</form>

属性

  • action:表示表单提交到的页面(也就是要把数据传入到哪个页面中)

  • method:表示表单的提交方式。默认是get。而get和post请求的区别就是post后面不跟请求体。也就是用户信息。相对来说更加的安全。(一般来说,get是用于超链接提交居多,post用作表单提交居多)

  • <form method="post" action="http://www.haosou.com"></from>

  • enctype:表示浏览器对发送给服务器的数据采用的编码格式。有三种格式。默认是不能将文件上传到服务器&rdquo;application/x-www-form-urlencoded&ldquo;、multipart/form-data用于将文件上传到服务器、text/plain不建议使用

  • name:设置表单名称,以便程序调用

  • target:提交的目标,与超链接无异

  • autocomplete:设置浏览器记录用户输入的信息。分为on和off两个值。默认为on。

  • novalidate:设置是否执行客户端数据有效性检查

  • input标签:表示用来收集用户输入数据的控件。它默认会出现一个单行的文本框。

  • type:文本框的类型。值为text时表示单行文本框;值为password表示密码框;值为search时,除了火狐浏览器的其他浏览器外,会显示一个叉来取消搜索内容,值为number时,表示只限于数字输入;值为range时,生成一个数值范围文本框;当type为date系列时,可以获取日期和时间的值,有六种形态date、month、time、week、datetime、datetime-local;当值为color代表可以获取不同的颜色;当值为checkbox、radio时表示复选框和单选。单选的name值必须一样。checked表示默认勾选状态值为img是表示产生一张图片按钮,后面可以接src,alt,width等熟悉值为email,tel,url时表示输入电子邮件、电话和网址格式值为hidden时,生成一个隐藏控件(看不见,但提交的时候会显示,一般用于关联主键id提交)值为file的时候,表示上传文件。accept属性表示限制文件<input type="text">

音乐<input type="checkbox" checked>

体育<input type="checkbox">

<input type="radio" name="sex" value="男" checked>男

<input type="radio" name="sex" value="女">女

<input type="hidden" value="1" name="id">

<input type="file" accept="image/gif">

  • maxlength:设置文本框最大字符长度

  • readonly:设置文本框为只读状态。可以提交但是不能修改文本框的值。

  • placeholder:占位符

  • size:设置文本框的宽度

  • required:表明用户必须输入一个值,否则无法通过输入验证

  • <input type="text" list="abc" required>

  • autofocus:让光标聚焦在某个input元素上,方便用户直接输入。<input name="user" autofocus>

  • disabled:禁止input元素 (连点击都不能)

  • list:为文本框提供建议值

<form>

<input type="text" list="abc">

<button>提交</button>

</form>

<datalist id="abc">

<option value="1">湖南</option>

<option value="2">海南</option>

</datalist>

  • value:默认在输入框内出现的值

  • form:与表单外的数据挂钩一遍提交

<form id="register" name="reg" action="index.html">

用户名:<input name="user">

<button>提交</button>

</form>

年龄:<input name="age" form="register">

  • label标签:把文字和input标签包裹起来可以方便设置样式,并且当用户点击文字的时候,光标会自动移入到对应的input框。(如果只是设置了文字用label包裹,又想点击文字将标签自动移入对应的框,可以将label的属性for的值设置成与input的id设置成一样)

<label for="user"> 用户名:</label>

<input id="user" name="user">

  • fieldset标签:对表单进行编组。三个属性name、form、disabled

  • legend标签:添加分组说明的标签(也就是说给分组加上一个标题)

<fieldset>

<legend>注册分组</legend>

<label for="user"> 用户名:</label>

<input id="user" name="user">

<button>提交</button>

</fieldset>

  • button标签:创建一个按钮。type属性有三个值,submit表示提交,reset表示重置,也就是把input的值变成初始值。button表示一个普通的按钮。

  • select标签:下拉列表。需要和option标签配合使用。

  • name属性:设定提交时的名称

  • disabled属性:将下拉列表禁用

  • form属性:将表单外部与内部挂钩

  • size属性:下拉列表的个数

  • multiple属性:设置是否可以多选

  • required:选择验证,必须选择后才能通过

<select name="fruit" size="5" multiple >

<!--value值是真正要提交上去的值,而后面的是显示到页面的值-->

<option value="1">花花菇凉</option>

<option value="2">文小喵</option>

</select>

optgroup标签:对列表进行分组选择。

<form action="http://www.baidu.com">

<select name="fruit" multiple size="5">

<optgroup label="表情包">

<option value="1">花花菇凉</option>

<option value="2">文小喵</option>

</optgroup>

<optgroup label="书">

<option value="4" selected>微微一笑很倾城</option>

<option value="5">神雕侠侣</option>

</optgroup>

</select>

<button>提交</button>

</form>

  • textarea标签:生成一个可变大小的多行文本框

<!--wrap表示是否插入换行符 有soft和hard两种。hard提交之后在地址栏可以看见%插入的隐藏换行符-->

<textarea name="content" rows="20" cols="30" wrap="hard"></textarea>

  • pattern:正则表达式。开头和结尾用^和$ novalidate属性表示不要验证该表单

<input type="text" placeholder="请输入区号和座机" pattern="^[\d]{2,4}\-[\d]{6,8}$">

html对网页页面的布局或者是表单验证等功能都相对简陋,并且不同的浏览器支持的成熟度是不尽相同的。因此在大部分情况下,还是要借助jsjqury等前端库,来呈现丰富多彩的验证效果。

.结构标记:作用就是为了提升标记的语义性,每个结构有每个不同的标记。

1.头部标记:<header></header>,用于定义页面的页眉,最上面的内容。等同于<div id="header"></div>,作用一样。就是相当于一个容器,装其他的元素。

2.导航标记:<nav></nav>,用于定义页面的导航链接部分。等同于<div id="nav"></div>

例如可以这样写导航:

<nav>

<ul>

<li></li>

</ul>

</nav>

3.主体标记:<section></section>作用:定义页面主体内容中的小节,现在section可以表示整个页面的主体内容等同于<div id="main"></div>

4.<article></article>作用:用于描述文本性较强,或者艺术气息较强的内容。一般情况下,论坛中的帖子信息,报纸信息,博客或微博中的条目信息。用户回复信息,有限考虑放在article中

5.<footer></footer>定义页面中或某个区域中的脚注信息,页面最底部的信息。

6.边栏:<aside></aside>定义页面侧边栏,靠边的信息

以上结构标记为的就是独立定义结构,替代div。

表单

表单的作用:显示,收集信息,并且将信息提交给服务器

(在注册,登陆的时候,网页就会提供一些供用户填写的表单,表单元素会把填写的信息提交服务器进行处理 )

表单包含两组内容

1.表单元素<form>

<form></form>

注意:使用表单控件提交数据时,表单不能省略

属性:

1.action:后台处理程序的地址(服务器端工程师提供),默认会提交给本页。

2.method:方式,表单的提交方式。不同的提交方式约束的内容不一样。

常用取值:2个

get:

1.显示提交数据,会将提交信息显示在地址栏上面,安全性不高,又叫显示提交

2.大小限制,最大支持到2kb的提交。

3.如果不设置method属性,默认就是get方式提交(显示提交,最大2kb)

4.使用场合:向服务器索取数据时,优先使用get

post:

1.隐式提交数据,不会将提交的信息显示在地址栏上,安全性较高,所有有关密码的信息提交时,必须用post

2.post没有大小限制。

3.使用场合:安全性要求较高的页面,传递数据量较大的时候

3.enctype

作用:设置对表单中提交的数据的编码方式,规范哪些数据可以提交给服务器

取值:

1.application/x-www-form-urlencoded,默认值,可以将普通的文本,特殊的字符,一起提交给服务器。

2.multipart/form-date,允许将表单中的文件,传递给服务器,普通文本不能直接传递。

3.text/plain,只能将普通文本传递给服务器,特殊字符不允许。

4.id

5.name

2.表单控件

什么是表单控件

包含在表单中的元素,具备可视化外观,并且可以接受用户输入的数据。

分类

1.input元素

2.textare文本域

3.select和option选项框

一.input元素,主要作用就是收集用户信息

语法:<input>

属性:

type,根据不同的类型值可以创建不同的输入控件,用户名,密码,按钮形式的

value,控件的值,提交给服务器的数据。

name,控件的名称。必须设置,否则无法提交,服务器主要根据name这个控件的名称,来获取value

disabled,禁用控件,该属性可以没有值。

1.文本框和密码框

文本框:<input type="text">

允许用户输入任意字符的数据,明文显示

密码框:<input type="password">

允许用户输入任意字符的数据,密文显示

属性:

maxlength:限制输入的字符数

readonly:只读,无需给值

value:控件值,同时也可以设置控件

注意:input元素下,如果不写type值,或者type值写错时,都默认为文本框。

单选框和复选框

1.单选框:<input type="radio">

属性:

1.name:定义名称并且实现控件分组,一组内的元素才能实现单选

2.value:控件值

3.checked:设置默认被选中,不需要值

2.复选框

<input type="checkbox">

属性:name:定义名称并且分组,便于服务器获取

3.按钮

1.提交按钮,功能固定化,负责将数据提交给服务器

<input type="submit">

2.重置按钮,功能固定化,负责将表单控件恢复到初始化的状态

<input type="reset">

3.普通按钮,没有固定功能,由开发者通过js来设置。

<input type="button">

value:显示在按钮上的文本

name:名称(可写可不写)

4.非input标签的按钮

<button></button>

<button type="button">普通按钮</button>

属性:type

5.隐藏域和文件选择框

1。隐藏域,不想让用户看见,但是又要提交到服务器的数据,可以放在隐藏域中

例如:隐藏用户id

type="hidden"

<input tpe="hidden">

属性:

name

value

6.文件选择框

提供一个基础控件,允许用户选择本机的文件上传到服务器

type="file"

<input type="file">

属性:name value

注意:

表单的method(提交方式)属性值必须为post

表单的enctype编码必须为multipart/form-date

更多知识关注小编,或者百度网络营销师钟震,钟震讲网络营销。会有很多相关知识,公众号网络营销师钟震,以后每天都会分享web前端,淘宝运营,竞价,网站建设和优化,社媒方面的知识。与大家共同进步。希望对您有一点点帮助,喜欢记得关注公众号。