社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
目錄
§　　重要form属性
§　　form常用控件
§　　form提交方式
资源链接
首頁 web前端 html教學 HTML ------ 关于表单 Form - Tina_xy

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

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

　　

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

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

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

　　　　　　id 属性：用来在客户端做相应的操作；如：

 

文本输入框: 　　　　　　　　 

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

 

本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

如何修復KB5055523無法在Windows 11中安裝？
3 週前 By DDD
如何修復KB5055518無法在Windows 10中安裝？
3 週前 By DDD
R.E.P.O.的每個敵人和怪物的力量水平
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
<🎜>：死鐵路 - 如何馴服狼
3 週前 By DDD
藍王子：如何到達地下室
3 週前 By DDD
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

Java教學
1654
14
CakePHP 教程
1413
52
Laravel 教程
1306
25
PHP教程
1252
29
C# 教程
1225
24
顯示更多
Related knowledge
HTML容易為初學者學習嗎？ HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

了解HTML，CSS和JavaScript：初學者指南 了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML，CSS和JavaScript的角色：核心職責 HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

Gitee Pages靜態網站部署失敗：單個文件404錯誤如何排查和解決？ Gitee Pages靜態網站部署失敗：單個文件404錯誤如何排查和解決？ Apr 04, 2025 pm 11:54 PM

GiteePages靜態網站部署失敗：404錯誤排查與解決在使用Gitee...

HTML中起始標籤的示例是什麼？ HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果？ 如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果？ Apr 05, 2025 am 06:15 AM

實現圖片點擊後周圍圖片散開並放大效果許多網頁設計中，需要實現一種交互效果：點擊某張圖片，使其周圍的...

HTML，CSS和JavaScript：Web開發人員的基本工具 HTML，CSS和JavaScript：Web開發人員的基本工具 Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

網頁批註如何實現Y軸位置的自適應佈局？ 網頁批註如何實現Y軸位置的自適應佈局？ Apr 04, 2025 pm 11:30 PM

網頁批註功能的Y軸位置自適應算法本文將探討如何實現類似Word文檔的批註功能，特別是如何處理批註之間的間�...

See all articles