精华内容
下载资源
问答
  • 主要介绍了Vue中el-form标签中的自定义el-select下拉框标签功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 表单控件select标签是用来创建下拉列表的,通过标签来定义可用选项以及其他属性来设置表单控件的选择个数等。今天将介绍的是HTML中的表单控件select的用法,具有一定的参考价值,希望对大家有所帮助。【推荐课程:...

    表单控件select标签是用来创建下拉列表的,通过标签来定义可用选项以及其他属性来设置表单控件的选择个数等。

    今天将介绍的是HTML中的表单控件select的用法,具有一定的参考价值,希望对大家有所帮助。

    【推荐课程:HTML教程】

    d8203e60d590b1692d8a4b9cbfd50b74.png

    select标签

    select用来创建下拉列表的,可用于在表单中接受用户的输入,其元素中的标签主要用于定义列表中的可用选项

    例:通过select实现下拉菜单案例

    打球

    运动

    看电视

    效果图如下:

    e5004997f50b8d83ce37e64707d94381.png

    select所具有的属性:

    select在HTML5中的新增属性有以下3种:

    autofocus:指的是在页面加载后文本区域会自动获得焦点,注意Internet Explorer 9 以及更早的版本不支持 标签的 autofocus 属性。

    form:表示文本区域所属的一个或多个表单,注意Internet Explorer 不支持 form 属性。

    required:指文本区域的范围而且这个属性是必填的,这个属性目前所有的主流浏览器都不支持

    size:指下拉列表中可见选项的数目。

    disabled:表示禁止使用该下拉列表。

    multiple:表示可以选择多个选项。

    name:指的是下拉列表的名称。

    例:设置下拉列表的可见书目为2且可以选择多个选项

    打球

    运动

    看电视

    效果图如下:

    ecfb553ac88ca2f660ca3023f7f6df97.png

    总结:以上就是本篇文章的全部内容了,希望通过这篇文章可以让大家对于select标签有所了解以及使用。

    展开全文
  •   <select></select> select里面通常跟option配合使用 ... 下拉框 ... 下拉框 ... 下拉框 ... 下拉框 ...select标签的selected 设置默认值 ...用optgroup标签包着option标签,optgroup label属性为组名 <! DOCTYPE...

     

     

    <select></select>

    select里面通常跟option配合使用

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title</title>
    </head>
    <body>
        <div>
            <form action="http://www.baidu.com" method="get">
                <div>
                    <!-- 下拉框 -->
                    <select>
                        <option>广州</option>
                        <option>深圳</option>
                        <option>山东</option>
                        <option>北京</option>
                    </select>
                </div>
            </form>
        </div>
    </body>
    </html>

     

     

    加上name属性 提交后台,让他提交到后台 在每个<option>里面加value

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title</title>
    </head>
    <body>
        <div>
            <form action="http://www.baidu.com" method="get">
                <div>
                    <!-- 下拉框 -->
                    <select name="sel">
                        <option value="1">广州</option>
                        <option value="2">深圳</option>
                        <option value="3">山东</option>
                        <option value="4">北京</option>
                    </select>
                </div>
                <input type="submit" value="提交">
            </form>
        </div>
    </body>
    </html>

     

     

    url上显示提交的值

     

     select的size属性

    size取值大于1的话,则为滚动列表,否则就是下拉选项框,默认size等于1

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title</title>
    </head>
    <body>
        <div>
            <form action="http://www.baidu.com" method="get">
                <div>
                    <!-- 下拉框 -->
                    <select name="sel" size="3">
                        <option value="1">广州</option>
                        <option value="2">深圳</option>
                        <option value="3">山东</option>
                        <option value="4">北京</option>
                    </select>
                </div>
                <input type="submit" value="提交">
            </form>
        </div>
    </body>
    </html>

     

     

     

      select的multiple属性

    multiple属性设置多选,该属性出现在<select>中,那么就允许多选(针对滚动列表)

    按着ctrl选多个

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title</title>
    </head>
    <body>
        <div>
            <form action="http://www.baidu.com" method="get">
                <div>
                    <!-- 下拉框 -->
                    <select name="sel" size="3" multiple>
                        <option value="1">广州</option>
                        <option value="2">深圳</option>
                        <option value="3">山东</option>
                        <option value="4">北京</option>
                    </select>
                </div>
                <input type="submit" value="提交">
            </form>
        </div>
    </body>
    </html>

     

     

     

     提交后台拿到两个选中值

     

    select标签的selected 设置默认值
    selected预选中,注意:如果不设置selected属性的话,那么选项框中的第一项会默认被选中。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title</title>
    </head>
    <body>
        <div>
            <form action="http://www.baidu.com" method="get">
                <div>
                    <!-- 下拉框 -->
                    <select name="sel">
                        <option value="1">广州</option>
                        <option value="2">深圳</option>
                        <option selected value="3">山东</option>
                        <option value="4">北京</option>
                    </select>
                </div>
                <input type="submit" value="提交">
            </form>
        </div>
    </body>
    </html>

     

    单选框

     

    多选项

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title</title>
    </head>
    <body>
        <div>
            <form action="http://www.baidu.com" method="get">
                <div>
                    <!-- 下拉框 -->
                    <select name="sel" size="3" multiple>
                        <option value="1">广州</option>
                        <option value="2">深圳</option>
                        <option selected value="3">山东</option>
                        <option value="4">北京</option>
                    </select>
                </div>
                <input type="submit" value="提交">
            </form>
        </div>
    </body>
    </html>

     

     

     

     

    optgroup 下拉框分组功能
    用optgroup标签包着option标签,optgroup label属性为组名
     
     
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title</title>
    </head>
    <body>
        <div>
            <form action="http://www.baidu.com" method="get">
                <div>
                     <!-- optgroup 下拉框分组功能 -->
                    <select name="city" size="5" multiple="multiple">
                        <optgroup label="广东省">
                            <option value="1">广州</option>
                            <option value="2">深圳</option>
                        </optgroup>
    
                        <optgroup label="浙江省">
                            <option value="1">杭州</option>
                            <option value="2">温州</option>
                        </optgroup>
                    </select>
                </div>
                <input type="submit" value="提交">
            </form>
        </div>
    </body>
    </html>
     
     

     

     

     

     

    转载于:https://www.cnblogs.com/mingerlcm/p/10637234.html

    展开全文
  • js获取交易表单下拉框选中的值

    千次阅读 2019-11-16 22:43:40
    实验任务: 1、网页标题:我的交易表单 2、在页面上创建一个表单用户界面,供用户挑选配置一台计算机。例如:CPU、内存、硬盘、主板、显卡、机箱、...(2)计算机各配件的型号用下拉列表方式供用户选择,每个标签的v...

    实验任务:

    1、网页标题:我的交易表单
    2、在页面上创建一个表单用户界面,供用户挑选配置一台计算机。例如:CPU、内存、硬盘、主板、显卡、机箱、光驱等。不同型号的产品价格不同,当用户改变所选配件的同时,计价程序自动计算新的价格,并且通过告警对话框或文本框来通知用户目前所选择的计算机配件的总价。
    (1)采用内嵌式引入JavaScript
    (2)计算机各配件的型号用下拉列表方式供用户选择,每个标签的value属性取值为该型号的单价,默认选项为“未选”,其value属性取值为0
    (3)在JavaScript中,计算机配件的总价使用自定义函数total()进行计算,并通过告警对话框显示,格式为:
    alert(“总价为:”+total);
    (4)在JavaScript中使用document.getElementById(“ID名称”)的方法获取表单对象,例如获取cpu的选择价格,可以使用
    cpu = Number(document.getElementById(“cpu”).value);
    (5)自定义界面布局及样式

    浏览器显示效果:

    在这里插入图片描述

    代码实现:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>我的交易表单</title>
    	<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		body{
    			background: url("http://pic.netbian.com/uploads/allimg/190305/232042-15517992421363.jpg");
    			background-size: 100%;
    		}
    		table{
    			width: 50%;
    			height: 320px;
    			margin: 15px auto;
    			font-size: 26px;
    			text-align: center;
    			border-radius: 10px;
    			color: #00ffe7;
    		}
    		caption{
    			font-family: "楷体";
    			font-size:40px;
    		}
    		table select{
    			font-size: 25px;
    			font-weight: bold;
    			height: 100%;
    			text-align: center;
    			cursor: pointer;
    			color: #0095ff;
    		}
    		button{
    			width: 200px;
    			height: 76%;
    			line-height: 76%;
    			font-size: 26px;
    			font-weight: bold;
    			font-family: "楷体";
    			color: #0095ff;
    			border-radius: 6px;
    		}
    		.else{
    			font-size: 20px;
    			color: red;
    			height: 30px;
    			line-height: 30px;
    			width: 400px;
    			position: absolute;
    			top: 655px;
    			left: 1130px;
    		}
    	</style>
    	<script type="text/javascript">
    		function CPU_price(){
    			CPU=Number(document.getElementById("CPU").value);
    			switch(CPU){
    				case 0 :
    				document.getElementById("price1").innerHTML="0元";
    				break;
    				case 1199:
    				 document.getElementById("price1").innerHTML="1199元";
    				break;
    				case 2210:
    				 document.getElementById("price1").innerHTML="2210元";
    				break;
    				case 4099:
    				document.getElementById("price1").innerHTML="4099元";
    				break;
    			}
    			price1=document.getElementById("price1").innerHTML;
    		}
    		function RAM_price(){
    			RAM=Number(document.getElementById("RAM").value);
    			switch(RAM){
    				case 0 :
    				document.getElementById("price2").innerHTML="0元";
    				break;
    				case 259:
    				 document.getElementById("price2").innerHTML="259元";
    				break;
    				case 699:
    				 document.getElementById("price2").innerHTML="699元";
    				break;
    				case 1848:
    				document.getElementById("price2").innerHTML="1848元";
    				break;
    			}
    			price2=document.getElementById("price2").innerHTML;
    		}		
    		function HDD_price(){
    			HDD=Number(document.getElementById("HDD").value);
    			switch(HDD){
    				case 0 :
    				document.getElementById("price3").innerHTML="0元";
    				break;
    				case 289:
    				 document.getElementById("price3").innerHTML="289元";
    				break;
    				case 699:
    				 document.getElementById("price3").innerHTML="699元";
    				break;
    				case 4299:
    				document.getElementById("price3").innerHTML="4299元";
    				break;
    			}
    			price3=document.getElementById("price3").innerHTML;
    		}
    		function MB_price(){
    			MB=Number(document.getElementById("MB").value);
    			switch(MB){
    				case 0 :
    				document.getElementById("price4").innerHTML="0元";
    				break;
    				case 339:
    				 document.getElementById("price4").innerHTML="339元";
    				break;
    				case 799:
    				 document.getElementById("price4").innerHTML="799元";
    				break;
    				case 1599:
    				document.getElementById("price4").innerHTML="1599元";
    				break;
    			}
    			price4=document.getElementById("price4").innerHTML;
    		}	
    		function VGA_price(){
    			VGA=Number(document.getElementById("VGA").value);
    			switch(VGA){
    				case 0 :
    				document.getElementById("price5").innerHTML="0元";
    				break;
    				case 1549:
    				 document.getElementById("price5").innerHTML="1549元";
    				break;
    				case 2699:
    				 document.getElementById("price5").innerHTML="2699元";
    				break;
    				case 14000:
    				document.getElementById("price5").innerHTML="14000元";
    				break;
    			}
    			price5=document.getElementById("price5").innerHTML;
    		}	
    		function total(){
    			total=parseInt(price1)+parseInt(price2)+parseInt(price3)+parseInt(price4)+parseInt(price5);
    			alert("总价为:"+total+"元");
    			document.getElementById("total").innerHTML=total;
    		}
    	</script>
    </head>
    <body>
    	<div class="container">
    		<form method="get">
    		<table border="2px">
    			<caption>计算机配置交易表单</caption>
    			<tr>
    				<th>配置</th>
    				<th>CPU</th>
    				<th>内存</th>
    				<th>硬盘</th>
    				<th>主板</th>
    				<th>显卡</th>
    			</tr>
    			<tr>
    				<td>
    					型号
    				</td>
    				<td>
    					<select id="CPU" onchange="CPU_price()"><!-- CPU -->
    						<option value="0" selected="selected">未选</option>
    						<option value="1199">酷睿i5 9400F</option>
    						<option value="2210">酷睿i7 8700K</option>
    						<option value="4099">酷睿i9 9900K</option>
    					</select>
    				</td>
    				<td>
    					<select id="RAM" onchange="RAM_price()"><!-- 内存 -->
    						<option value="0" selected="selected">未选</option>
    						<option value="259">科赋BOLT X</option>
    						<option value="699">芝奇Ripjaws V</option>
    						<option value="1848">芝奇Trident Z</option>
    					</select>
    				</td>
    				<td>
    					<select id="HDD" onchange="HDD_price()"><!-- 硬盘 -->
    						<option value="0" selected="selected">未选</option>
    						<option value="289">东芝500GB</option>
    						<option value="699">希捷Laptop 4TB</option>
    						<option value="4299">希捷BarraCuda</option>
    					</select>
    				</td>
    				<td>
    					<select id="MB" onchange="MB_price()"><!-- 主板 -->
    						<option value="0" selected="selected">未选</option>
    						<option value="339">华擎A320M-HDV</option>
    						<option value="799">技嘉B450M DS3H</option>
    						<option value="1599">技嘉Z390 AORUS</option>
    					</select>
    				</td>
    				<td>
    					<select id="VGA" onchange="VGA_price()"><!-- 显卡 -->
    						<option value="0" selected>未选</option>
    						<option value="1549">铭瑄 GeForce GTX</option>
    						<option value="2699">AMD Radeon RX 5700</option>
    						<option value="14000">华硕ROG STRIX-RTX</option>
    					</select>
    				</td>
    			</tr>
    			<tr>
    				<td>价格</td>
    				<td id="price1"></td>
    				<td id="price2"></td>
    				<td id="price3"></td>
    				<td id="price4"></td>
    				<td id="price5"></td>
    			</tr>
    			<tr>
    				<td>总价</td>
    				<td colspan="5" id="total"><button onclick="total()">点击显示总价</button></td>
    			</tr>
    		</table>
    	</form>
    	</div>
    	<div class="else">温馨提示:点击选择型号后会显示对应价格</div>
    </body>
    </html>
    
    展开全文
  • border-left: 5px solid #009688;... 标签表单内容的一部分打包,生成一组相关表单的字段。当一组表单元素放到 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表...

    border-left: 5px solid #009688;

    注释:solid实体,实心样式;

    Blockquote:块引用;Fieldset:字段集;

    1.所有浏览器都支持

    标签。

    fieldset 元素可将表单内的相关元素分组。

    标签将表单内容的一部分打包,生成一组相关表单的字段。

    当一组表单元素放到

    标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。 标签没有必需的或唯一的属性。

    标签为 fieldset 元素定义标题。

    2、问题:示例页面下拉框样式出不来,输入框可以

    2eed777bca3e65217875fc5e146ce27c.png

    解决:

    引入js文件

    render刷新select选择框渲染;

    代码:

    layui.use('form', function () {

    var form = layui.form;

    form.render('select'); //刷新select选择框渲染

    //各种基于事件的操作,下面会有进一步介绍

    });

    总结:页面html中有样式后,需要js代码重新渲染一下,才有下拉框效果;

    Layui会对select、checkbox、radio等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例。值得注意的是:导航的Hover效果、Tab选项卡等同理(它们需依赖 element 模块)

    所以当新添加这些元素以后需要对页面表单元素重新渲染一下

    https://www.layui.com/demo/form.html

    https://blog.csdn.net/light_666/article/details/80205041

    展开全文
  • 开发需求中遇到了一个下拉框多选及回显js问题,最终解决! 页面效果 因为框架较老,这部分筛选是使用from表单请求的,所以多选框回显有些复杂,最终页面效果是如下: 代码示例 jsp页面代码: <!--因为项目使用...
  • 以上这篇Django forms表单 select下拉框的传值实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。 本文标题: Django forms表单 select下拉框的传值实例 本文地址: ...
  • 摘要:下文讲述html select标签的用法简介说明,如下所示:实验环境:windowshtml元素 select标签简介html元素 select 标签功能:html中select标签的功能为 html页面提供 “下拉选择数据”的操作方式使用select下拉标签...
  • trigger: 'change' }], }, iview进行表单验证select时候验证失败的问题: 用iview自带的表单验证select标签的时候,一直验证不通过,因为iview默认校验数据类型为String,而我的select用的value是number类型的 跟...
  • html-表单-两种下拉框

    2020-06-27 10:04:25
    -- 两种下拉框 --> <select name="cars"><!-- 下拉框 --> <option value ="volvo">124</option><!-- 下拉框选项 --> <option value="saad">saad</option> &...
  • Java实现Layui的form表单动态绑定下拉框 【1】视图层 <link href="${ctx}/Content/layui/css/layui.css" rel="stylesheet" /> <form class="layui-form" id="fruserInfor" lay-filter="layform">.....
  • 以下示例显示如何使用Spring Web MVC框架在表单中使用Dropdown。首先,让我们使用Eclipse IDE,并按照以下步骤使用Spring Web Framework开发基于动态窗体的Web应用程序:步骤描述1创建一个名为HelloWeb的项目,在一...
  • 最外面是form表单,以post方式提交 再来看处理页面 分别设两个变量接收 造完连接对象再就是sql语句,做这个必须要用修改语句 看一下语句是怎么写的 a36是数据库的一列,也就是传过来的业务员 code则...
  • 之前这个标签中的数据是单独的参数,把它加到addform对象数组...el-select标签中v-model中的数据是指菜单名称这个下拉框选中的值 把这个表情中的数据放到表单里面的数据一起就可以进行验证了 改后代码在下图: ...
  • 表单里面的元素标签 ...二,下拉框标签 select代表下拉的环境,开始和结束。option代表下拉的内容。这个标签常常和foreach循环一起使用,遍历数组或者集合。 文本框 密码 文件 隐藏 提交 ...
  • 主要是通过设置全局的id从页面使用data-**来...然后赋给对应的input标签达到参数的传递 注:全局变量的值并不能直接获取使用 js页面 var app = getApp(); var store_id = '' Page({ /** * 页面的初始数据
  • Django forms表单 select下拉框的传值

    千次阅读 2019-02-26 21:47:00
    其中select下拉框里的内容是从数据库中取出来的,利用ModelChoiceField,设置queryset来取出数据,这样实现动态存取select中的值。 而前端代码可以直接使用这个表单变量obj ... {% for field in obj %} {{...
  • 关于前端 jsp option 下拉框 标签 selected 选中显示使用 遇到下拉框在前端界面显示重复和不完全可以解决的办法之一,也最好懂如下: 这里解决的问题是后端将产品对象传到前端 在编辑页面自动显示,下拉框的一些问题...
  • javascript怎么获取html:form里面的下拉框的值?本帖最后由 abcxiaoye 于 2015-01-24 18:48:52 编辑想在struts中做一个二级联动的下拉菜单save();">类别:请选择主目录${blist.name}"selected>相关的ajax代码...
  • 下拉框 如何提交表单呢? 有的时候,需要下拉框单独提交表单,到后台处理,这个方法就可以实现。 需要用到 js ,咱们直接上源码,稍微懂点的一看就明白   标签选择          &...
  • 在servlet中 String select=request.getParameter(“selectName”);得到的是选中的option的value值,那么如果把value值等于它的选择项的值得话就可以了比如 <select name="selectName"> ...
  • input表单各种框/按钮和下拉框

    千次阅读 2020-12-06 15:33:22
    目录表单:1.1输入框label标签通用属性1.2密码框1.3单选框1.4多选框1.5 按钮1.6文件上传1.7隐藏域下拉菜单select常用属性option常用属性输入框fieldset为表单加一个框 表单: 用来收集用户输入或选择的信息,并提交...
  • form表单 input textarea 下拉框及display

    千次阅读 2017-08-02 18:44:38
    1、表单的作用 1.显示、收集用户信息 2.将收集到的信息提交给服务器 2、表单语法 语法:form /form 注意:表单中的内容是可以提交给服务器的,提交给服务器的内容要放在表单元素里表单属性: action:表单...
  • 怎么自定义select下拉选择框的样式,起先考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但达不到理想的兼容,下面是比较有效的解决方案,需要的朋友可以看看
  • 主要介绍了Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题,非常不错,具有参考借鉴价值,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,986
精华内容 7,194
关键字:

表单下拉框标签

友情链接: showqiudongqi.rar