HTML ------ 关于表单 Form

Form(表单)主要用于采集和提交用户输入的信息，是页面与WEB服务器交互过程中最重要的信息来源。

掌握表单(Form)有以下几个要点：

重要form属性

form常用控件

form提交方式

§　　重要form属性

action {URL}：规定表单提交时向何处发送数据。

enctype ：规定在发送表单数据之前如何对表单数据进行编码。（值如下）

　　　　　　 application/x-www-form-urlencoded ：在发送前编码所有字符（默认为此方式）。

　　　　　 multipart/form-data ：不对字符编码。注：使用包含文件上传控件的表单时，必须使用该值。

method：指定表单以何种方法发送。

　　　　　　 get ：from表单里所填的值，附加在action指定的URL后面，做为URL链接而传递。（可以在地址栏看见表单的提交信息）

　　　　　　 post ：from表单里所填的值，附加在HTML Headers上。（不可以在地址栏看见表单的提交信息）

§　　form常用控件

<label>标记：

　　<label>标记为input元素定义标注，它的for 属性应当与相关元素的id属性相同。绑定后单击该文字，鼠标将聚焦到绑定的表单控件上。

　　　建议：每一个表单元素的文字描述都使用<label>标记！（<label></label>两标签之间的内容即为对绑定的表单控件的文字描述）

　　　注意：每个表单元素应当分配 name 属性和 id 属性。( name 属性和 id 属性应该尽可能地使用相同的或相关的值。)

　　　　　　name 属性：用来将数据提交到服务器；

　　　　　　id 属性：用来在客户端做相应的操作；如：<label>标签的绑定、CSS 选择器的使用等。

文本输入框: 　　　　　　　　

1)、input type="text" 单行文本框

<label  for= "Account">账号：</label>
<input  type="text" name="Account"  id="Account" value="账户" maxlength="20">

2)、textarea 多行文本框

<label for="comment">评论：</label>
<textarea name="comment" id="comment" cols="30" rows="15" maxlength="100"></textarea>

说明: maxlength 规定文本区域的最大字符数；如果在<textarea> 中输入字符时，换行也算一个字符。

密码输入框：

　　定义密码字段。（字符会被遮盖）

<label  for= "Password">密码：</label>
<input  type="password" name="password"  id="password" value="密码">

单选框：

设置单选按钮以及获取选中的单选按钮的值

<form name="MyForm" action="URL" method="post">
　　<p>性别：
　　　<input type="radio" name="sex" id="male" value="male"><label for="male">male</label>
　　　<input type="radio" name="sex" id="female" value="female"><label for="female">female</label>
　　</p>
　　<input type="button" value="获取选中项" onclick="getValue();" />
</form>

//获取选中的单选值
<script language="javascript">
function getValue(){
    //获取表单的所有提交信息（根据表单的name属性）
    var  myform = document.forms["MyForm"];
    //sex是单选按钮的name属性值
    var radioChoices = myform.sex;
    //遍历整个单选项表
    for(i=0;i<radioChoices.length;i++)   
        if(radioChoices[i].checked)   
            break; //发现了被选中项,退出
    alert("选中的选项是："+radioChoices[i].value);
}
</script>

注意：

1）、在客户端，Javascript 对表单及表单元素的操作，更常用其name 属性而不是id属性。因为，对于某些特定的表单元素(如：单选按钮等)，使用其name 属性更易于获得元素值，也更方便向服务器传送数据！

2）、保证同一组单选按钮的name 属性值相同。

复选框：

复选框的“全选”、“全不选”、“反选”功能以及所选复选框值的获得功能

<form name="MyForm" action="URL" method="post">
　　<input type="checkbox" name="hoboy" id="music"><label for="music">music</label>
　　<input type="checkbox" name="hoboy" id="swim"><label for="swim">swim</label>
　　<input type="checkbox" name="hoboy" id="dance"><label for="dance">dance</label>

　　<input type="button" value="全选" onclick="selectBoxs(1);" />
　　<input type="button" value="全不选" onclick="selectBoxs(0);" />
　　<input type="button" value="反选" onclick="selectBoxs(-1);" />
　　<input type="submit" value="提交" onclick="submit();" />
</form>

<script language="javascript">

//全选，全部选，反选
function selectBoxs(value){
    var myform = document.forms["MyForm"];
    //hoboy 为所有复选框的name属性值
    var CheckboxChoices = myform.hoboy;
 
    for(var i=0;i<CheckboxChoices.length;i++)    //遍历每一个选项
        if(value < 0)//反选
            CheckboxChoices[i].checked = !CheckboxChoices[i].checked;
        else 
            //value为1是则全选,为0时则全不选
            CheckboxChoices[i].checked = value;
}
    
function getSelect(){
    var myform = document.forms["MyForm"];
    var CheckboxChoices = myform.hoboy;
　　//创建数组放checkbox选中的值
    var arrayCheckbox = new Array();
    for(var i=0;i<CheckboxChoices.length;i++){
    　　if(CheckboxChoices[i].checked)
    　　　　arrayCheckbox.push(CheckboxChoices[i].value);
    }
    alert(arrayCheckbox);
}

</script>

注意：保证同一组复选框按钮的name 属性值相同。

下拉框：

下拉框的重要属性：

multiple 属性:用于设置下拉表框的类型（多选还是单选）

type 属性：JS根据type 属性的值获得下拉列表框select 控件的类型。

type 属性的值为：select-multiple（多选）或 select-one（单选）

下拉列表框默认只能选中一项，若要设置为可以多选，则设置<select multiple = "multiple"> 即可。

size属性：定义可见选项的数目。size="3",即下拉框内可以显示三个可选选项。

<form name="MyForm" action="URL" method="post">
　　<p>简单的选择列表</p>
　　<select id="myselect" name="myselect" multiple="multiple" size="3">
       <option value="Apples">Apples</option>
       <option value="Bananas">Bananas</option>
       <option value="Cherries">Cherries</option>
       <option value="oranges">oranges</option>
   </select></br>
　　<input type="button" onclick="getSelectValue('myselect')" value="查看选项" />
</form>

<script language="javascript">
    //获取选中的下拉列表值
    function getSelectValue(myselect){
        var myform = document.forms["MyForm"];
        var select = myform.elements[myselect];
        //判断是单选还是多选
        if(select.type == "selece-one"){
            var oneChoice = select.selectedIndex;//获取选中项
            alert("单选" + select.options[oneChoice].value);//获取选中项的值
        }
        else{
            var multiChoices = new Array();
            //遍历整个下拉菜单
            for(var i=0;i<select.options.length;i++)
                if(select.options[i].selected)
                   multiChoices.push(select.options[i].value);
            alert("多选" + multiChoices);
        }
    }
</script>

提示：

在不同操作系统中，选择多个选项的差异：

对于 windows：按住 Ctrl 按钮来选择多个选项
对于 Mac：按住 command 按钮来选择多个选项

由于上述差异的存在，同时由于需要告知用户可以使用多项选择，对用户更友好的方式是使用复选框。

§　　form提交方式

表单的提交方式由method属性的取值决定，所以form提交方式有以下两种：

get 方式：

表单数据将会追加action指定的URL后面，做为URL链接而传递（以查询字符串的形式提交到服务端）。

变量提交的样式为：html元素的name属性=提交的值。多个变量，在URL链接后面以 & 符号隔开。

post方式：

表单数据将附加在请求体（HTML Headers）上被发送出去，并不附加在URL链接后面。

建议：表单通常还是以post方式提交比较好，这样可以不破坏URL，况且URL还有长度限制。

get 与 post 的区别：

1）、get是从服务器上获取数据；post是向服务器传送数据

2）、数据的查询：比如浏览论坛或博客时，URL一般包含了分类、页码数、每页记录数等信息。 get 方式，能一目了然的看到所要查询的信息； post 因为隐藏掉了这些信息，不方便进行查询。

3）、数据安全性：对一项记录，进行更改、添加操作时，get 方式附加在URL上，会泄露数据；post 方式，能隐藏数据，保证数据的安全性。

4）、数据传输量：get 虽然方便查询，但由于是附加在URL上，使得其传送的数据量较小，不能大于2KB；post传送的数据量较大，一般被默认为不受限制。

资源链接

推荐：更多代码详解，请转到代码仓库：https://github.com/Tina-xy/HTML

推荐： Fish Li 博主的 ---- 细说Form(表单)

http://www.cnblogs.com/fish-li/archive/2011/07/17/2108884.html

posted @ 2016-03-11 11:14 Tina_xy 阅读(1107) 评论(0) 编辑收藏举报

刷新页面返回顶部

Tina_xy

HTML ------ 关于表单 Form

§ 重要form属性

§ form常用控件

§ form提交方式

资源链接

公告

§　　重要form属性

§　　form常用控件

§　　form提交方式