（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. C#LeetCode刷题之#888-公平的糖果交换（Fair Candy Swap）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3758 访问. 爱丽丝和鲍勃有不同大小的糖果棒:A[i] 是爱丽丝 ...

  2. C#LeetCode刷题之#867-转置矩阵（Transpose Matrix）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3756 访问. 给定一个矩阵 A, 返回 A 的转置矩阵. 矩阵的 ...

  3. SpringBoot整合Spring Security

    好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star,更多文章请前往:目录导航 前言 Spring Securi ...

  4. css如何让子元素在父元素中水平垂直居中

    方法一: display:flex <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  5. springMVC入门（四）------参数绑定与返回值类型

    简介 从之前的介绍,已经可以使用springMVC完成完整的请求.返回数据的功能. 待解决的问题:如何将数据传入springMVC的控制器进行后续的处理,完成在原生servlet/jsp开发中Http ...

  6. 2020.5.21 第一篇 Scrum冲刺博客

    Team:银河超级无敌舰队 Project:招新通 项目冲刺集合贴:链接 目录 一.Alpha 阶段成员任务安排 二.明日任务安排 三.预期的任务量 四.敏捷开发前的感想 五.团队期望 一.Alpha ...

  7. Federated Learning: Challenges, Methods, and Future Directions

    郑重声明:原文参见标题,如有侵权,请联系作者,将会撤销发布! arXiv:1908.07873v1 [cs.LG] 21 Aug 2019 Abstract 联邦学习包括通过远程设备或孤立的数据中心( ...

  8. 区块链入门到实战（35）之Solidity – 变量作用域

    局部变量的作用域仅限于定义它们的函数,但是状态变量可以有三种作用域类型. Public – 公共状态变量可以在内部访问,也可以通过消息访问.对于公共状态变量,将生成一个自动getter函数. Inte ...

  9. Webfunny知识分享：webpack sourceMap解析源码

    前端的业务越来越庞大,导致我们需要引入的js等静态资源文件的体积也越来越大,不得不使用压缩js文件的方式来提高加载的效率. 编译工具的诞生,极大地方便了我们处理js文件的这一过程,但压缩后的js文件极 ...

  10. SAP ABAP RFC接口通用日志工具：abap fm logger

    很早之前就想写个能记录函数模块日志的通用工具,最早尝试时,没有想清楚插入代码的体积问题.在一些群友的提醒下,了解到可以用宏来处理这一问题.不过当时比较忙,就没有动笔.最近又想起这件事,花了2天完成了一 ...