html tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 22, 2016 pm 05:19 PM

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常用控件

标记：

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

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

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

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

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

文本输入框: 　　　　　　　　

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

<span style="font-size: 15px;"><span style="color: #0000ff;"><span style="color: #800000;">label  </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">= "Account"</span><span style="color: #0000ff;">></span>账号：<span style="color: #0000ff;"></span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">input  </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="Account"</span><span style="color: #ff0000;">  id</span><span style="color: #0000ff;">="Account"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="账户" maxlength="20"</span><span style="color: #0000ff;">></span></span></span></span>

2)、textarea 多行文本框

<span style="font-size: 15px;"><span style="color: #0000ff;"><span style="color: #800000;">label </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">="comment"</span><span style="color: #0000ff;">></span>评论：<span style="color: #0000ff;"></span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">textarea </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="comment"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="comment"</span><span style="color: #ff0000;"> cols</span><span style="color: #0000ff;">="30"</span><span style="color: #ff0000;"> rows</span><span style="color: #0000ff;">="15" maxlength="100"</span><span style="color: #0000ff;">></span><span style="color: #800000;">textarea</span><span style="color: #0000ff;">></span></span></span></span>

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

密码输入框：

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

<span style="font-size: 15px;"><span style="color: #0000ff;"><span style="color: #800000;">label  </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">= "Password"</span><span style="color: #0000ff;">></span>密码：<span style="color: #0000ff;"></span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">input  </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="password"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="password"</span><span style="color: #ff0000;">  id</span><span style="color: #0000ff;">="password"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="密码"</span><span style="color: #0000ff;">></span></span></span></span>

单选框：

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

<span style="font-size: 15px;"><span style="color: #0000ff;"><span style="color: #800000;">form </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="MyForm"</span><span style="color: #ff0000;"> action</span><span style="color: #0000ff;">="URL"</span><span style="color: #ff0000;"> method</span><span style="color: #0000ff;">="post"</span><span style="color: #0000ff;">></span>
　　<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #000000;">性别：
　　　</span><span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="sex"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="male"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="male"</span><span style="color: #0000ff;">><span style="color: #800000;">label </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">="male"</span><span style="color: #0000ff;">></span>male<span style="color: #0000ff;"></span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
　　　<span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="sex"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="female"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="female"</span><span style="color: #0000ff;">><span style="color: #800000;">label </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">="female"</span><span style="color: #0000ff;">></span>female<span style="color: #0000ff;"></span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
　　<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
　　<span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="button"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="获取选中项"</span><span style="color: #ff0000;"> onclick</span><span style="color: #0000ff;">="getValue();"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">form</span><span style="color: #0000ff;">><br><br></span><span style="color: #000000;">//获取选中的单选值
</span><span style="color: #0000ff;"><span style="color: #800000;">script </span><span style="color: #ff0000;">language</span><span style="color: #0000ff;">="javascript"</span><span style="color: #0000ff;">></span>
<span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> getValue(){
    </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">获取表单的所有提交信息（根据表单的name属性）</span>
    <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;">  myform </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> document.forms[</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">MyForm</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">];
    </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">sex是单选按钮的name属性值</span>
    <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> radioChoices </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> myform.sex;
    </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">遍历整个单选项表</span>
    <span style="background-color: #f5f5f5; color: #0000ff;">for</span><span style="background-color: #f5f5f5; color: #000000;">(i</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">;i</span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">radioChoices.length;i</span><span style="background-color: #f5f5f5; color: #000000;">++</span><span style="background-color: #f5f5f5; color: #000000;">)   
        </span><span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;">(radioChoices[i].checked)   
            </span><span style="background-color: #f5f5f5; color: #0000ff;">break</span><span style="background-color: #f5f5f5; color: #000000;">; </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">发现了被选中项,退出</span>
<span style="background-color: #f5f5f5; color: #000000;">    alert(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">选中的选项是：</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;">radioChoices[i].value);
}
</span><span style="color: #0000ff;"></span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span>

注意：

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

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

复选框：

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

<span style="font-size: 15px;"><span style="color: #0000ff;"><span style="color: #800000;">form </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="MyForm"</span><span style="color: #ff0000;"> action</span><span style="color: #0000ff;">="URL"</span><span style="color: #ff0000;"> method</span><span style="color: #0000ff;">="post"</span><span style="color: #0000ff;">></span>
　　<span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="hoboy"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="music"</span><span style="color: #0000ff;">><span style="color: #800000;">label </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">="music"</span><span style="color: #0000ff;">></span>music<span style="color: #0000ff;"></span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
　　<span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="hoboy"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="swim"</span><span style="color: #0000ff;">><span style="color: #800000;">label </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">="swim"</span><span style="color: #0000ff;">></span>swim<span style="color: #0000ff;"></span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;">　　<span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="hoboy"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="dance"</span><span style="color: #0000ff;">><span style="color: #800000;">label </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">="dance"</span><span style="color: #0000ff;">></span>dance<span style="color: #0000ff;"></span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>

　　<span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="button"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="全选"</span><span style="color: #ff0000;"> onclick</span><span style="color: #0000ff;">="selectBoxs(1);"</span> <span style="color: #0000ff;">/></span>
　　<span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="button"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="全不选"</span><span style="color: #ff0000;"> onclick</span><span style="color: #0000ff;">="selectBoxs(0);"</span> <span style="color: #0000ff;">/></span>
　　<span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="button"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="反选"</span><span style="color: #ff0000;"> onclick</span><span style="color: #0000ff;">="selectBoxs(-1);"</span> <span style="color: #0000ff;">/></span>
　　<span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="提交"</span><span style="color: #ff0000;"> onclick</span><span style="color: #0000ff;">="submit();"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">script </span><span style="color: #ff0000;">language</span><span style="color: #0000ff;">="javascript"</span><span style="color: #0000ff;">></span>

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

</span><span style="color: #0000ff;"></span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

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

下拉框：

下拉框的重要属性：

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

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

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

下拉列表框默认只能选中一项，若要设置为可以多选，则设置

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

<span style="font-size: 15px;"><span style="color: #0000ff;"><span style="color: #800000;">form </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="MyForm"</span><span style="color: #ff0000;"> action</span><span style="color: #0000ff;">="URL"</span><span style="color: #ff0000;"> method</span><span style="color: #0000ff;">="post"</span><span style="color: #0000ff;">></span>
　　<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>简单的选择列表<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
　　<span style="color: #0000ff;"><span style="color: #800000;">select </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="myselect"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="myselect"</span><span style="color: #ff0000;"> multiple</span><span style="color: #0000ff;">="multiple"</span><span style="color: #ff0000;"> size</span><span style="color: #0000ff;">="3"</span><span style="color: #0000ff;">></span>
       <span style="color: #0000ff;"><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="Apples"</span><span style="color: #0000ff;">></span>Apples<span style="color: #0000ff;"></span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span>
       <span style="color: #0000ff;"><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="Bananas"</span><span style="color: #0000ff;">></span>Bananas<span style="color: #0000ff;"></span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span>
       <span style="color: #0000ff;"><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="Cherries"</span><span style="color: #0000ff;">></span>Cherries<span style="color: #0000ff;"></span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span>
       <span style="color: #0000ff;"><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="oranges"</span><span style="color: #0000ff;">></span>oranges<span style="color: #0000ff;"></span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span>
   <span style="color: #0000ff;"></span><span style="color: #800000;">select</span><span style="color: #0000ff;">></span><span style="color: #800000;">br</span><span style="color: #0000ff;">></span>
　　<span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="button"</span><span style="color: #ff0000;"> onclick</span><span style="color: #0000ff;">="getSelectValue('myselect')"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="查看选项"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">form</span><span style="color: #0000ff;">><br><br></span><span style="color: #0000ff;"><span style="color: #800000;">script </span><span style="color: #ff0000;">language</span><span style="color: #0000ff;">="javascript"</span><span style="color: #0000ff;">></span>
    <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">获取选中的下拉列表值</span>
    <span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> getSelectValue(myselect){
        </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> myform </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> document.forms[</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">MyForm</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">];
        </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> select </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> myform.elements[myselect];
        </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">判断是单选还是多选</span>
        <span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;">(select.type </span><span style="background-color: #f5f5f5; color: #000000;">==</span> <span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">selece-one</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">){
            </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> oneChoice </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> select.selectedIndex;</span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">获取选中项</span>
<span style="background-color: #f5f5f5; color: #000000;">            alert(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">单选</span><span style="background-color: #f5f5f5; color: #000000;">"</span> <span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;"> select.options[oneChoice].value);</span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">获取选中项的值</span>
<span style="background-color: #f5f5f5; color: #000000;">        }
        </span><span style="background-color: #f5f5f5; color: #0000ff;">else</span><span style="background-color: #f5f5f5; color: #000000;">{
            </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> multiChoices </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> Array();
            </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">遍历整个下拉菜单</span>
            <span style="background-color: #f5f5f5; color: #0000ff;">for</span><span style="background-color: #f5f5f5; color: #000000;">(</span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> i</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">;i</span><span style="background-color: #f5f5f5; color: #000000;"><span style="background-color: #f5f5f5; color: #000000;">select.options.length;i</span><span style="background-color: #f5f5f5; color: #000000;">++</span><span style="background-color: #f5f5f5; color: #000000;">)
                </span><span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;">(select.options[i].selected)</span>
<span style="background-color: #f5f5f5; color: #000000;">                   multiChoices.push(select.options[i].value);</span>
<span style="background-color: #f5f5f5; color: #000000;">            alert(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">多选</span><span style="background-color: #f5f5f5; color: #000000;">"</span> <span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;"> multiChoices);
        }
    }
</span><span style="color: #0000ff;"></span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span>

提示：

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

对于 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

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Mengapa tag HTML penting untuk pembangunan web?May 02, 2025 am 12:03 AM

Htmltagsareessentialforwebdevelopmentastastheystructureandhancewebpages.1) theDefinelayout, semantik, dan interactivity.

Terangkan kepentingan menggunakan gaya pengekodan yang konsisten untuk tag dan atribut HTML.May 01, 2025 am 12:01 AM

Gaya pengekodan HTML yang konsisten adalah penting kerana ia meningkatkan kebolehbacaan, kemampuan dan kecekapan kod. 1) Gunakan tag dan atribut huruf kecil, 2) Pastikan lekukan yang konsisten, 3) Pilih dan tentukan sebut harga tunggal atau berganda, 4) Elakkan mencampurkan gaya yang berbeza dalam projek, 5) Gunakan alat automasi seperti Prettier atau Eslint untuk memastikan konsistensi dalam gaya.

Bagaimana untuk melaksanakan Carousel Multi-Project di Bootstrap 4?Apr 30, 2025 pm 03:24 PM

Penyelesaian untuk melaksanakan Carousel Multi-Project dalam Bootstrap4 Melaksanakan Carousel Multi-Project di Bootstrap4 bukanlah tugas yang mudah. Walaupun bootstrap ...

Bagaimanakah laman web rasmi DeepSeek mencapai kesan menembusi acara tatal tetikus?Apr 30, 2025 pm 03:21 PM

Bagaimana untuk mencapai kesan penembusan peristiwa menatal tetikus? Apabila kami melayari web, kami sering menghadapi beberapa reka bentuk interaksi khas. Sebagai contoh, di laman web rasmi DeepSeek, � ...

Cara mengubahsuai gaya kawalan main balik video HTMLApr 30, 2025 pm 03:18 PM

Gaya kawalan main balik lalai video HTML tidak dapat diubahsuai secara langsung melalui CSS. 1. Buat kawalan tersuai menggunakan JavaScript. 2. Mencantikkan kawalan ini melalui CSS. 3. Pertimbangkan keserasian, pengalaman pengguna dan prestasi, menggunakan perpustakaan seperti video.js atau PLYR dapat memudahkan proses.

Masalah apa yang akan disebabkan oleh menggunakan Pilih asli di telefon anda?Apr 30, 2025 pm 03:15 PM

Masalah yang berpotensi dengan menggunakan pilihan asli pada telefon bimbit semasa membangunkan aplikasi mudah alih, kami sering memenuhi keperluan untuk memilih kotak. Biasanya, pemaju ...

Apakah kelemahan menggunakan pilihan asli di telefon anda?Apr 30, 2025 pm 03:12 PM

Apakah kelemahan menggunakan pilihan asli di telefon anda? Apabila membangunkan aplikasi pada peranti mudah alih, sangat penting untuk memilih komponen UI yang betul. Banyak pemaju ...

Bagaimana untuk mengoptimumkan pengendalian perlanggaran perayauan orang ketiga di dalam bilik menggunakan tiga.js dan octree?Apr 30, 2025 pm 03:09 PM

Gunakan tiga.js dan octree untuk mengoptimumkan pengendalian perlanggaran perayauan orang ketiga di dalam bilik. Gunakan octree dalam tiga.js untuk melaksanakan perayauan orang ketiga di dalam bilik dan tambahkan perlanggaran ...

See all articles