1、form表单常用属性练习

 <style>

        .form1 {

            margin: auto;

            height: 900px;

            width: 500px;

            text-align: center;

            line-height: 40px;

            letter-spacing: 2px;

            border: 1px solid red;

        }

        .img {

            height: 50px;

            width: 50px;

        }

    </style>

</head>

<body>

    <div class="form1">

        <form action="">

            <span>用&nbsp;户&nbsp;名：</span><input type="text" placeholder="请输入用户名"><br>

            <span>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</span><input type="password"><br>

            <span>确认密码：</span><input type="password"><br>

            <span>性&nbsp;&nbsp;别：</span> &nbsp;&nbsp; &nbsp;&nbsp;

            <input type="radio" name="radio" id="radio" value="nan" checked>

            <label for="radio">男</label>

            <input type="radio" name="radio" id="radio1">

            <label for="radio1">女</label><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            <span>爱好:</span>

            <input type="checkbox" name="box1" id="box1">

            <label for="box1">阅读</label>

            <input type="checkbox" name="box2" id="box2">

            <label for="box2">足球</label>

            <input type="checkbox" name="box3" id="box3">

            <label for="box3">游戏</label><br>

            <span>电话号码：</span> <input type="tel" pattern="1\d{10}" title="请输入正确的手机号" maxlength="11" placeholder="请输入手机号"><br>

            <span>邮箱：</span> <input type="email" title="请输入正确的邮箱" placeholder="请输入邮箱"><br>

            <span>验证码：</span> <input type="text" placeholder="请输入验证码"><br>

            <br>

            <input type="submit" value="注册">

            <input type="reset" value="重置"><br>

            <br>

            <span>颜色选择器</span> <input type="color"><br>

            <span>日期</span> <input type="date" value="2019-11-12"><br>

            <span>日期+时间</span> <input type="datetime-local" value="2018-11-12T00:23"><br>

            <span>时间</span> <input type="time" value="00:20"><br>

            <span>月份</span> <input type="month" value="2018-09"><br>

            <span>周数</span> <input type="week" value="2019-W02"><br>

            <span>图片提交</span> <input type="image" src="img/安卓.png" class="img">

            <h1>下拉列表</h1>

            <select name="city" id="" size="1">

                <optgroup label="第一">

                <option value="nanchang">南昌</option>

                <option value="nanchong">南充</option>

            </optgroup>

            <optgroup label="第二">

                <option value="chengdu" selected >成都</option>

                <option value="xizang">西藏</option>

            </optgroup>

            </select>

            <input type="text" list="apple">

            <datalist id="apple">

            <option >西瓜</option>

            <option >香蕉</option>

            <option >草莓</option>

            </datalist>

        </form>

    </div>

</body>

得到的效果是：

html/form表单常用属性认识的更多相关文章

  1. form表单的属性标签

    form表单的常用标签 表单: <form id="" name="" method="post/get" action=" ...

  2. form表单的属性标签和练习

    form表单的标签 做一个如下图的form表单: 我们的代码如下: <body leftmargin="400px" topmargin="200px"& ...

  3. HTML 和 form 表单常用标签

    HTML和CSS 常用标签: p:段落,自动换行 span:和div类似,但是默认不换行 br:换行 hr:分割线 h1-h6:标题标签 a:超链接 瞄点:通过给a链接设置#XX作为链接,给需要链接的 ...

  4. html5中form表单新增属性以及改良的input标签元素的种类

    在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...

  5. form 表单 enctype 属性-(转自w3c)

    <from action="xxx.xxx" enctype="multipart/form-data"></from> 在上传文件时必 ...

  6. Form 表单常用正则验证 （收藏）

    1.^\d+$ //匹配非负整数(正整数 + 0) 2.^[0-9]*[1-9][0-9]*$ //匹配正整数 3.^((-\d+)|(0+))$ //匹配非正整数(负整数 + 0) 4.^-[0-9 ...

  7. javascript form表单常用的正则表达式

    form验证时常用的几个正则表达式 座机: \d{3,4}-\d{7,8} 手机号: /^1[34578][0-9]{9}$/ (\86)?\s+1[34578]\d{0-9} (\+86)?\s*1 ...

  8. html5 form表单常用标签

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Django之form表单常用字段与插件

    from django.shortcuts import render,HttpResponse from django import forms from app01 import models f ...

随机推荐

  1. 转自网络用LIBSVM进行回归预测的粗浅认识————————作者师梦

    说一说我对用LIBSVM进行回归预测的粗浅认识(整理完成于2012年5.11) 作者 :  师梦       吾本工程小硕一枚,前用matlab建模,已然完成.某日,正沾沾自喜之际,吾师曰:“汝已为之 ...

  2. ASP.NET Core-Docs：在 ASP.NET Core 中启用跨域请求（CORS）

    ylbtech-ASP.NET Core-Docs:在 ASP.NET Core 中启用跨域请求(CORS) 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 1. ...

  3. AXIS 1.4 自定义序列化/反序列化类

    axis1.4的CalendarDeserializer 使用的时区是GMT,导致日期显示不准确 private static SimpleDateFormat zulu = new SimpleDa ...

  4. JAVA学习记录<一>

    一: JAVA初体验: 1.JAVA简介: 2.环境搭建: 3:MyEclipse的使用简介: 4:程序的移植:项目的导入,导出. 5:学习JAVA的经验: 多写,多问,总结和复习!!!

  5. java：activiti（工作流简介 ）

    1.工作流:(workflow) 整个工作的流程 eg:请假工作流 (我)员工-->组长-->经理-->主管-->人事-->总经理(董事会) eg:出差(报账)工作流 ( ...

  6. ES 知识点

    一.ES基于_version 进行乐观锁并发控制 post /index/type/id/_update?retry_on_conflict=5&version=6 1.内部版本号 第一次创建 ...

  7. PHPBase64格式编码图片

    base64_encode编码图片 /** * 获取图片的Base64编码(不支持url) * @date 2017-02-20 19:41:22 * * @param $img_file 传入本地图 ...

  8. PJzhang:ping命令的基本用法

    猫宁!!! 参考链接:https://www.cnblogs.com/diantong/p/9626751.html http://aiezu.com/article/linux_ping_comma ...

  9. docker随笔

    --查看系统内核版本,docker对于centos系统内核版本需要高于3.10uname -r--移除旧的版本sudo yum remove docker \ docker-client \ dock ...

  10. Cisco的动态Nat、PAT

    Lab_C(config)# interface Ethernet0/0  ip address 192.168.30.2 255.255.255.0 router rip  network 172. ...