html表单下拉框？html

大家好，关于html表单下拉框很多朋友都还不太明白，不过没关系，因为今天小编就来为大家分享关于html的知识点，相信应该可以解决大家的一些困惑和问题，如果碰巧可以解决您的问题，还望关注下本站哦，希望对各位有所帮助！

HTML表单介绍

HTML表单(Form)是HTML的一个重要部分，主要用于采集和提交用户输入的信息。

举个简单的例子，一个让用户输入姓名的HTML表单(Form)。示例代码如下：

form action="

请输入你的姓名：
input type="text" name="yourname"
input type="submit" value="提交"
/form

学习HTML表单(Form)最关键要掌握的有三个要点：

表单控件(Form Controls)

Action

Method
先说表单控件(Form Controls)，通过HTML表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的操作。比如上面的例句里，input type="text"就是一个表单控件，表示一个单行输入框。

用户填入表单的信息总是需要程序来进行处理，表单里的action就指明了处理表单信息的文件。比如上面例句里的

至于method，表示了发送表单信息的方式。method有两个值：get和post。get的方式是将表单控件的name/value信息经过编码之后，通过URL发送(你可以在地址栏里看到)。而post则将表单的内容通过http发送，你在地址栏看不到表单的提交信息。那什么时候用get，什么时候用post呢？一般是这样来判断的，如果只是为取得和显示数据，用get；一旦涉及数据的保存和更新，那么建议用post。

HTML表单(Form)常用控件(Controls)
HTML表单(Form)常用控件有：

表单控件(Form Contros)说明

input type="text"单行文本输入框

input type="submit"将表单(Form)里的信息提交给表单里action所指向的文件

input type="checkbox"复选框

input type="radio"单选框

select下拉框

textArea多行文本输入框

input type="password"密码输入框(输入的文字用*表示)

表单控件(Form Control)：单行文本输入框(input type="text")
单行文本输入框允许用户输入一些简短的单行信息，比如用户姓名。例句如下：

input type="text" name="yourname"

表单控件(Form Control)：复选框(input type="checkbox")
复选框允许用户在一组选项里，选择多个。示例代码：

input type="checkbox" name="fruit" value="apple"苹果br
input type="checkbox" name="fruit" value="orange"桔子br
input type="checkbox" name="fruit" value="mango"芒果br

用checked表示缺省已选的选项。

input type="checkbox" name="fruit" value="orange" checked桔子br

表单控件(Form Control)：单选框(input type="radio")
使用单选框，让用户在一组选项里只能选择一个。示例代码：

input type="radio" name="fruit" value="Apple"苹果br
input type="radio" name="fruit" value="Orange"桔子br
input type="radio" name="fruit" value="Mango"芒果br

用checked表示缺省已选的选项。

input type="radio" name="fruit" value="Orange" checked桔子br

表单控件(Form Control)：下拉框(select)
下拉框(Select)既可以用做单选，也可以用做复选。单选例句如下：

select name="fruit"

option value="apple"苹果

option value="orange"桔子

option value="mango"芒果
/select

如果要变成复选，加muiltiple即可。用户用Ctrl来实现多选。例句：

select name="fruit" multiple

用户还可以用size属性来改变下拉框(Select)的大小。

表单控件(Form Control)：多行输入框(textarea)
多行输入框(textarea)主要用于输入较长的文本信息。例句如下：

textarea name="yoursuggest" cols="50" rows="3"/textarea
其中cols表示textarea的宽度，rows表示textarea的高度。

表单控件(Form Control)：密码输入框(input type="password")
密码输入框(input type="password")主要用于一些保密信息的输入，比如密码。因为用户输入的时候，显示的不是输入的内容，而是黑点符号。。例句如下：

input type="password" name="yourpw"

表单控件(Form Control)：提交(input type="submit")
通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里action所指向的文件。例句如下：

input type="submit" value="提交"

表单控件(Form Control)：图片提交(input type="image")
input type=image相当于 input type=submit，不同的是，input type=image以一个图片作为表单的提交按钮，其中 src属性表示图片的路径。

input type="image" src="images/icons/go.gif"

alt="提交" NAME="imgsubmit"

最常见也最基础的表单设计-下拉列表

前三篇说了表单中的"输入框"、“单选按钮”、“复选框”，那这次就说下拉列表。

下一篇说文本域和按钮。

众所周知没有任何人，愿意填写表单，输入框让过程看起来会变得很复杂。那此时就会用到另外一个组件就是-下拉列表。

他所包含的是选项，因为不需要让用户去进行输入，所以就可以防止用户在输入时带来错误这问题了。

实际在设计中，下拉列表也有很多的“弊端”，所以需要尝试不同的方法去解决问题。

·下拉列表组成

·下拉列表步骤

·下拉列表提示也很重要

·合理排列下拉选项

·下拉列表选项数量

·下拉列表还能做的更多

·简单的数字可以输入

·选日期没那么麻烦

·步进器原则

·步进器组成

·滑块原则

·滑块的细节

·最后

下拉列表由标签[Label]、下拉的列表和选项组成，下拉列表常见的选择为单选。

呼出下拉列表的步骤：点击下拉列表控件→展开列表→滚动扫描列表选择选项关闭→关闭下拉列表。

在输入框中有个元素叫暗提示[placeholder]，作用是在用户填写信息时提供帮助，这条原则也同样适用于下拉列表。这个提示需要简短准确且告诉用户需要选什么，且在展开菜单之后依旧能够看得到选的是什么。

例如上图：“出发日期”就比“请选择”要好的多。

可以根据以往用户的选择数据进行分析，尝试将选择较多的选项放置在优先级靠前的位置。

选项较多时可以尝试只列出几个用常选的，好处在于90%的用户会立即选择满足自己目的的选项，还有10%的人可以选择“其他”(可以尝试加入一个下拉选择或输入框再满足目的)。虽然这样做会忽略10%的用户，但这样优先级排序能够提高90%用户体验。

90%以上的用户最常选的选项，就可以作为默认选项了。

避免在列表中放置太多的选项，当下拉列表中的选项超过15个时，他们将变得很难扫描。在Web端用户需要不断的滚动鼠标才可以找到满足自己目的的选项。再说在移动端有限的屏幕空间内滚动，体验可以说是非常不好了。

假设我们现在有个下拉列表，是需要收集用户的国家信息。一眼就能看出这个下拉列表是按照拼音首字母进行排序的，那“阿尔巴尼亚(A)”是排在首位的。当我要选择“中国(Z)”时候，就会很费力了。

当我要选择“中国”时？那我很清楚我需要选择的是什么，那就可以考虑把下拉选择改变成自动填充选择的列表？那这样只需要通过键盘输入一个“中”，就过滤出包含“中”(或者zhong)的候选选项了。通过简单的输入配合去提高选择的效率。

选项太多需要避免使用下拉列表，选项太少也避免使用下拉列表。

之前在《最常见也最基础的表单设计-单选按钮》中说当2≤选项个数(单选)≤7时，当下拉列表中选项少于7个时，可以考虑使用单选按钮了。

使用单选按钮，用户只需通过扫描就可以了解这问题有几个选项和每个选项是什么，从而可以去除点击触发下拉框的动作。

同样如果是简单的问题，需要回答(是/否)或(打开/关闭)时，就避免使用下拉列表了，使用复选框和开关。

通过程序的帮助去减少选择次数。

例如：如果在充值手机号必须需要用户选择运营商，当用户输入手机号后，那下拉列表就可以帮助用户选择运营商。如果在支付绑卡时需要用户选择银行，当用户输入了银行卡号后，下拉列表就可以帮助用户选择发卡银行和卡片类型了。对于不同的下拉选择会有着成千上万种的设计方法。

在移动端，我们也可以通过“调用位置”这个系统硬件功能来预填选项给到用户。

下拉列表中选项是简单数字的话，下拉列表相比输入费力度更高。可以考虑配合数字键盘输入，这样比下拉选择更简单。根据场景的不同有着不同的解决方法，适合精确数值小范围调整可以考虑使用步进器；那不精确数值大范围调整可以考虑使用滑块；选日期可以使用日期选择器。

选择日期肯定会也经常遇见，如果使用多个(年/月/日)下拉列表给用户带去的是非常不好的体验。那我们可以尝试去使用日期选择器(date picker)。

步进器[Stepper]由增加按钮、减少按钮和按钮控制的数值组成。每次点击增加按钮(或减少按钮)数字去增加(或减少)固定的数量。比方用户更喜欢在电商App里用步进器选择商品数量，此时步进器比起下拉列表更直观，使用起来也就更轻松了。

需要注意最大限制和最小限制，在最大或最小限制时，加入禁用增加(减少)按钮。如果能通过数据分析(90%用户经常选择的)预填一个默认值是提升效率的办法。

试想：步进器的默认值离用户预期的数值越远，点击的次数也就越多，那完成选择的效率也就越低。当默认值无法满足(10%用户经常选择的)，还可以把数值显示改成输入框，再配合上数字键盘输入去做精确的修改。

常见的滑块[Sliders]由可以拖动的按钮、轴、最大数值、最小数值组成。和单选按钮一样，滑块这个行为受现实生活的行为所影响。

场景：我在听歌声音有点轻，我想让声音响点。我使用滑块配和听觉在0%-100%这个区间内调整音量，而不是我要75%的音量这个精确值，这个范围内(近似值)就行，那此时滑块比起下拉列表使用起来更简单了。

根据不同的设计场景，精确值可能是很重要的，那滑块也可以满足。加入一个数值显示，数值随着每次滑动改变。同时数字也当可以点击变成输入框，再配合上数字键盘输入去修改滑块位置。

在移动端，建议把滑块的最大数值、最小数值的位置放置在上方。那在使用时永远可以保持可见。如果在下方就容易被手指遮盖。

拖动时，使用动效做加持，给与用户交互的反馈

选择比输入的效率高，但也不是说什么时候都可以使用下拉列表。根据不同的场景利用他们(下拉列表/步进器/滑块)的原则做出变形，选择也可以变很不一样。例如：可以在下拉列表中把相关的选项分组展示，也可以让下拉列表变形为多选控件等。方便好用的选择和表单目的一样：表单只是个收集用户信息的方式，用户需要的是高效愉快的完成填写。

在上面提到一个日期选择器(date picker)没往细里说，之后在另外说一下。

以上的观点从我个人总结出发，虽说文笔拙劣，但是如果你有不同的意见，欢迎交流～

如果你看到这，下面就是其他组件的文章(广告)了：

《最常见也最基础的表单设计-输入框》

《最常见也最基础的表单设计-单选按钮》

《最常见也最基础的表单设计-复选框》

能放三条广告，心里觉得超爽了...

用js怎样获得下拉框的值

1、首先我们打开软件进入代码编辑按照图示代码先创建一个下拉框。

2、要运行后网页界面如此显示下拉框。

3、接下来我们按照图示代码用js来获取被选中的值。

4、首先我们通过selectedIndex来获得被选中的下标，再通过下标来获得值。

5、当然，如果你是用jquery的话可以按照图示代码进行设置依然可以获得下拉框的值。

文章分享结束，html表单下拉框和html的答案你都知道了吗？欢迎再次光临本站哦！