智能表单-使用datalist元素填写URL地址

  datalist选项列表

一个令任期待已久的新表单功能是现在用户可以通过一个下拉菜单创建自己的条目。众所周知,select元素受限于指定的option值Web开发者以往的做法是通过各种JavaScript技巧在文本字段中加入可扩充的选项列表。

现在H5很好的解决了这个问题。新的元素datalist和option元素本质上类似,都是实现容器的功能呢。但是现在我们可以为datalist元素指派任意input元素,以显示所需要的选项。

代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <form>
            <p>
                <label for="url"  center;">GOto</label>
                http://<input type="text" id="url" name="homepage" list="homepages autofocus"/>
                <datalist id="homepages">
                    <option value="www.geogle.com"></option>
                    <option value="html5.komplett.cc/welcom"></option>
                    <option value="slashdot.org"></option>
                    <option value="wired.com"></option>

                </datalist>
                <input type="submit" onclick="window.location=‘http://‘+document.getElementById(‘url‘).value;return false; "name="" id="" value="起飞" align="center"/>
            </p>
        </form>
    </body>
</html>

为啥下拉效果么出来?

时间: 2024-10-19 23:23:31

智能表单-使用datalist元素填写URL地址的相关文章

HTML5 智能表单

1.表单新增属性  ? autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文本框自动获得焦点 注意:一个页面中最多只能有一个表单元素设置该属性,否则功能将失效,建议对第一个input元素设置autofocus属性. ? formaction 属性 <input type="submit" formaction="处理逻辑"><!-- 处理逻辑可为a

BootStrap 智能表单系列 十 自动完成组件的支持

web开发中,肯定遇到像百度.google这种搜索的功能吧,那智能表单中的自动完成可以做什么呢,下面来揭晓: 1.包含像google.百度等类似的简单搜索 2.复杂结构的支持,比如说 输入产品编号,需要将产品的编号.产品的名称.产品的单价.产品的备注信息等填写会表单中的某个位置 代码如下(页面地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form3-ele-autocomplete.html): 自动完成

form的智能表单

1.智能表单的介绍 其中,(1)中的使用格式使得form不会太臃肿. 2.使用规范 3.新属性 4.举例 二.程序 1.关于邮件的问题 1 <!DOCTYPE html> 2 <head> 3 <meta charset=utf-8> 4 <title>form test</title> 5 </head> 6 <body> 7 <form id="for" action=""

HTML5学习之智能表单(二)

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <form

BootStrap 智能表单

背景:本码农.NET后端工程师,由于现在的公司后端能玩到的东西不怎么深入(一般也就sql.linq.反射.wcf....),所以申请玩玩前端的东西,在负责的一个电商项目中发现很大一部分是根据表结构来构建form表单的,而且模块还很多的,特别是表的列名都还没确定的时候需要先出界面,等后面表列名确定后又的重新来给表单元素加上id.name等,尼玛感觉这样下去就是一真正的码农了,于是自己整了一套根据配置来生成form表单的插件 源码地址(github):BootStrap智能表单 本系列将包括 1.表

BootStrap 智能表单系列 九 表单图片上传的支持

本章介绍如何在生成表单后,可以支持上传图片后可以及时预览图片 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form3-ele-img.html): 依赖jquery-file-upload插件,需要引用jquery.ui.widget.js.jquery.iframe-transport.js.jquery.fileload.js 调用global.Fn.InitPlugin('img',

网页版智能表单,在线开发平台设计界面,控件简单说明

智能表单开发界面如下图: 设计预览后的界面 由图可视智能表单分为:设计区与工具条 工具条是为了方便进行快速开发的工具,进行开发主要控件为下图红色框中的控件: 控件名称 图标 作用 控件编号 复选框按钮   常规的复选框html控件 UC-001 单选框   常规的单选框html控件 UC-002 文本框   常规的文本框html控件 UC-003 多文本框   常规的多文本框html控件 UC-004 下拉列表框   常规的下拉列表html控件 UC-005 按钮   常规的按钮html控件 U

[记录]jquery validate 不用submit方式验证表单或单个元素

jquery validate 不用submit方式验证表单或单个元素 jQuery validate的版本: v1.14.0 var result = $('#myForm').validate({ errorElement : 'span', errorClass : 'help-block error', rules:{ }, message:{ } }).form(); 具体的内容可以参考官网文档:http://jqueryvalidation.org/documentation/#li

BootStrap 智能表单系列 十一 级联下拉的支持

像省市县选择的这种,但凡是个人肯定都见过,实现方式有很多种 1.有在第一级选择的时候去加载或者从本地对象中拿第一级对应的数据源显示到列表中,第二级以此类推 2.也有将所有的项都加载到select中,然后通过关联来显示或隐藏与上一级别无关的项 感觉还是第二种简单一些,于是使用了第二种方式来实现的,其余的就不废话了 代码如下(页面地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form3-ele-cascade