（1）<select>元素（下拉列表）

<html>

<body>

<!-- 表单处理程序在action属性中指定 -->

<form action='action_page.php'>

<select name="cars">

<option value="audi">Audi</option>

<option value="bwm">BWM</option>

<option value="toyato">TOYATO</option>

</select>

<br />

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

</form>

</body>

</html>

运行结果：

PS：

（1）<option> 元素定义待选择的选项。

（2）列表通常会把首个选项显示为被选选项。

（3）可够通过添加 selected 属性来定义预定义选项。

<option value="fiat" selected>Fiat</option>

（2）<button>元素

<button> 元素定义可点击的按钮，配合onclick使用，可点击生成alert弹框：

<html>

<body>

<!-- 表单处理程序在action属性中指定 -->

<button type="button" onclick="alert('hello world')">点击我</button>

</body>

</html>

（3）<datalist> 元素

<datalist> 元素为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

<html>

<body>

<!-- 表单处理程序在action属性中指定 -->

<form action="action_page.php">

<input list="browsers">

<datalist id="browsers">

<option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome">

<option value="Safaro">

<option value="Opera">

</datalist>

<input type="submit" value="提交查询">

</form>

</body>

</html>

参考：https://www.w3school.com.cn

HTML -- 表单元素2的更多相关文章

  1. HTML5 学习总结（二）——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  2. CSS之表单元素

    表单就是收集用户信息的,就是让用户填写的.选择的. 1                <div> 2                         <h3>欢迎注册本网站&l ...

  3. 表单元素的submit()方法和onsubmit事件

    1.表单元素中出现了name="submit"的元素 2.elemForm.submit();不会触发表单的onsubmit事件 3.动态创建表单时遇到的问题 表单元素拥有subm ...

  4. HTML5 学习笔记（二）——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  5. 【原】如何改变表单元素的外观(for Webkit and IE10)

    表单元素在网页设计中使用的非常频繁,如文本输入框.单选框.复选框.选择列表.上传文件,它们在浏览器中的展现有自带的外观,为了在视觉上取得更好的产品体验,保持客户端的统一,通常产品经理会提出需要改变它的 ...

  6. MVC中使用内建的HTML辅助方法产生表单元素提交表单与button按钮事件的陷阱

    网站模板页有个登陆的退出按钮,当点击时跳转到登陆页面. <button onclick="logout()" >退出</button> $("#l ...

  7. [转]CSS 表单元素对齐详解

    来源:http://blog.sina.com.cn/s/blog_655388ed0100lzyk.html 简单的设置input{vertical-align:middle}即可,完美的: lab ...

  8. VUE 表单元素双向绑定总结

    checkbox最基本用法: <input type="checkbox" v-model="inputdata" checked/> <in ...

  9. iScroll4下表单元素聚焦及键盘的异常问题

    本文是zawa同事写的一篇博文,相信很多在webapp开发中的同学使用iscroll4会遇到的该问题,问过zawa兄的建议,在这里分享给大家,希望能帮助到各位~ 原文地址:http://www.zaw ...

  10. 9月8日HTML表单元素（form、文本、按钮、选择）

    表单元素 一.form form代表表单,功能:用于申明表单,定义采集数据的范围,也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里.<for ...

随机推荐

  1. dota2输入法无候选框？

    win10自带的微软拼音在dota2中不会显示候选框,或者说是选词框. 这种情况下只能选择其他输入法. 我选择的是搜狗输入法(此随笔添加时的最新版),在dota2中有选词框. 网上有些人说要改兼容性, ...

  2. 痞子衡嵌入式：利用i.MXRT1060,1010上新增的FlexSPI地址重映射(Remap)功能可安全OTA

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是i.MXRT部分型号上新增的FlexSPI Remap功能. OTA升级设计几乎是每个量产客户都绕不开的话题,产品发布后免不了要做固件( ...

  3. 【Gin-API系列】Gin中间件之日志模块（四）

    日志是程序开发中必不可少的模块,同时也是日常运维定位故障的最重要环节之一.一般日志类的操作包括日志采集,日志查询,日志监控.日志统计等等.本文,我们将介绍日志模块在Gin中的使用. Golang如何打 ...

  4. Android 本地缓存Acache的简单使用

    设置缓存数据: ACache mCache = ACache.get(this); mCache.put("key1", "value"); //保存6秒,如果 ...

  5. GRMS_README

    基于Hadoop的商品推荐系统 基于特征:基于行为:具有了一定的历史特征. 基于用户: 基于商品: 推荐结果=用户的购买向量*物品的相似度矩阵 物品的相似度:物品的共现次数 1.项目名:GRMS2.添 ...

  6. JavaScript学习系列博客_38_JavaScript 事件

    事件(Event) - 事件指的是用户和浏览器之间的交互行为.比如:点击按钮.关闭窗口.鼠标移动.... - 我们可以为事件来绑定回调函数来响应事件. - 绑定事件的方式: 1.可以在标签的事件属性中 ...

  7. Java多线程_ThreadLocal

    用法:ThreadLocal用于保存某个线程共享变量:对于同一个static ThreadLocal,不同线程只能从中get,set,remove自己的变量,而不会影响其他线程的变量. ThreadL ...

  8. 阿里巴巴Java开发手册1.4.0

    链接:https://pan.baidu.com/s/16kKzcRcu20SMDdydMm9ZUw 提取码:p9ef

  9. seo增加外链的方法

    http://www.wocaoseo.com/thread-128-1-1.html 今天给大家介绍一下本人发外链的一点经验吧.好多新手都感觉,发个外链真的好难哦.其实之前我也是这样认为的,发外链好 ...

  10. e3mall商城总结13之订单确认（有BUG）

    说在前面的话 上一节说了购物车的生成,本节主要说了在购物车的列表上去结算,从而生成一个未支付的订单,生成的订单默认状态为1, 题目说的BUG是因为所有数据都是通过前端向后端生成的,包括订单的金额.因此 ...