HTML -- 表单元素2
(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的更多相关文章
- HTML5 学习总结(二)——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
- CSS之表单元素
表单就是收集用户信息的,就是让用户填写的.选择的. 1 <div> 2 <h3>欢迎注册本网站&l ...
- 表单元素的submit()方法和onsubmit事件
1.表单元素中出现了name="submit"的元素 2.elemForm.submit();不会触发表单的onsubmit事件 3.动态创建表单时遇到的问题 表单元素拥有subm ...
- HTML5 学习笔记(二)——HTML5新增属性与表单元素
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- 【原】如何改变表单元素的外观(for Webkit and IE10)
表单元素在网页设计中使用的非常频繁,如文本输入框.单选框.复选框.选择列表.上传文件,它们在浏览器中的展现有自带的外观,为了在视觉上取得更好的产品体验,保持客户端的统一,通常产品经理会提出需要改变它的 ...
- MVC中使用内建的HTML辅助方法产生表单元素提交表单与button按钮事件的陷阱
网站模板页有个登陆的退出按钮,当点击时跳转到登陆页面. <button onclick="logout()" >退出</button> $("#l ...
- [转]CSS 表单元素对齐详解
来源:http://blog.sina.com.cn/s/blog_655388ed0100lzyk.html 简单的设置input{vertical-align:middle}即可,完美的: lab ...
- VUE 表单元素双向绑定总结
checkbox最基本用法: <input type="checkbox" v-model="inputdata" checked/> <in ...
- iScroll4下表单元素聚焦及键盘的异常问题
本文是zawa同事写的一篇博文,相信很多在webapp开发中的同学使用iscroll4会遇到的该问题,问过zawa兄的建议,在这里分享给大家,希望能帮助到各位~ 原文地址:http://www.zaw ...
- 9月8日HTML表单元素(form、文本、按钮、选择)
表单元素 一.form form代表表单,功能:用于申明表单,定义采集数据的范围,也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里.<for ...
随机推荐
- C#开发笔记之06-为什么要尽可能的使用尾递归,编译器会为它做优化吗?
C#开发笔记概述 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/962 访问. 从A函数跳转到B函数,在B函数执行完毕后 ...
- C#LeetCode刷题之#53-最大子序和(Maximum Subarray)
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4012 访问. 给定一个整数数组 nums ,找到一个具有最大和的 ...
- leetcode 877. Stone Game 详解 -——动态规划
原博客地址 https://blog.csdn.net/androidchanhao/article/details/81271077 题目链接 https://leetcode.com/proble ...
- Vulnhub篇Photographerr
0x00 靶机信息 靶机:Photographerr:1 难度:中 下载:https://www.vulnhub.com/entry/photographer-1,519/ 0x01 信息收集 靶场网 ...
- STL函数库的应用第四弹——全排列(+浅谈骗分策略)
因为基础算法快学完了,图论又太难(我太蒻了),想慢慢学. 所以暂时不写关于算法的博客了,但又因为更新博客的需要,会多写写关于STL的博客. (毕竟STL函数库还是很香的(手动滑稽)) 请出今天主角:S ...
- 笔试算法稳了,GitHub 50k Star《labuladong的算法小抄》
秋招算法有救了!!! 前不久在 GitHub 出现了一个手把手带你刷 LeetCode 的项目:fucking-algorithm. 该项目此前在 GitHub 开源后,连续多次霸榜 GitHub T ...
- node-sass 报错的解决方法
今天在运行项目发现原来好好的项目报错了.报错大致信息如下: 这段代码是我升级node之后里面根据不同的项目位置什么的会有所不同. 简单的说,这段代码意思是node-sass 不兼容 node v8 的 ...
- Excel 科学计数法数值转换
问题场景 如果导出的数据文件后缀为.CSV,一般数值类型的数据超过12位后,单元格的数据就用科学计数法来表示了. 比如身份证号.较长的id,数值会超过12位,而科学计数法表示,不方便查看或操作,很多情 ...
- 在我们使用Redis作为一个LRU缓存的时候,怎么做才能更高效
当用Redis作为一个LRU存储时,有些时候是比较方便的,在你增添新的数据时会自动驱逐旧的数据.这种行为在开发者论坛是非常有名的,因为这是流行的memcached系统的默认行为. LRU实际上只是支持 ...
- 算法-图(2)Bellman-Ford算法求最短路径
template <class T,class E> void Bellman-Ford(Graph<T,E>&G, int v, E dist[], int path ...