专栏首页eadelaHTML5-新增表单元素

HTML5-新增表单元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    <form action="">
        用户名:<input type="text" name="userName"><br>
        密码:<input type="password" name="userPwd"> <br>
        加密:<keygen></keygen><br>
        <input type="submit">
    </form>

    <!--显示输出信息:只能显示不能修改
    1.语义性更强
    2.值需要你去设置,不能自动计算-->
    <output>总金额:¥100.00</output>
    
    
    <!--专业:
    <select name="" id="">
        <option value="1">前端与移动开发</option>
        <option value="2">java</option>
        <option value="3">javascript</option>
        <option value="4">c++</option>
    </select>-->
    <!--不仅可以选择,还应该可以输入-->
    <!--建立输入框与datalist的关联  list="datalist的id号"-->
    专业:<input type="text" list="subjects"> <br>
    <!--通过datalist创建选择列表-->
    <datalist id="subjects">
        <!--创建选项值:value:具体的值 label:提示信息,辅助值-->
        <!--option可以是单标签也可以是双标签-->
        <option value="英语" label="不会"/>
        <option value="前端与移动开发" label="前景非常好"></option>
        <option value="java" label="使用人数多"></option>
        <option value="javascript" label="做特效"></option>
        <option value="c" label="不知道"></option>
    </datalist>

    网址:<input type="url" list="urls">
    <datalist id="urls">
        <!--如果input输入框的type类型是url,那么value值必须添加http://-->
        <option value="http://www.baidu.com" label="百度"></option>
        <option value="http://www.sohu.com"></option>
        <option value="http://www.163.com"></option>
    </datalist>
</form>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vuejs基础-计算器案例

    eadela
  • oracle--对象权限

    测试: update ww.wwTable set name = 'sss' where id = 5;

    eadela
  • 夜神模拟器调试reactnative步骤

    夜神模拟器调试过程信息 1、用react-native start 命令开启rn守护进程 2、用adb connect 127.0.0.1:162001命令...

    eadela
  • js汇率计算器系统

    css逻辑: 第一步:先清除掉系统默认的元素的padding与margin值. 第二步;定义css变量

    贵哥的编程之路
  • html+css入门基础案例之页面设计

    梨涡浅笑
  • openwrt将LAN口改为WAN方法

    牢骚 折腾了好几个好几个小时,终于搞好了。原因就是因为固件里面的端口序号和实际路由器后面的序号不一致,导致我的设置和物理连接对不上,这是个巨坑。 折腾需求 PS...

    行 者
  • bootstrap select 多选 搜索框 常用

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> ...

    用户5760343
  • bootstrap select 单选 常用

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> ...

    用户5760343
  • bootstrap select 多选 常用

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> ...

    用户5760343
  • 如何使用百度翻译接口实现多语言网站

    在网站开发过程中,有的需求可能是要求多语言开发,涉及多个国家的语言,那么怎么实现功能和需求呢?首先我们将网站内容拆分为两类,动态数据和静态描述,什么是动态数据呢...

    小白程序猿

扫码关注云+社区

领取腾讯云代金券