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. LC 889. Construct Binary Tree from Preorder and Postorder Traversal

    Return any binary tree that matches the given preorder and postorder traversals. Values in the trave ...

  2. 提升键盘可访问性和AT可访问性

    概述 很多地方比如官网中需要提升 html 的可访问性,我参考 element-ui,总结了一套提升可访问性的方案,记录下来,供以后开发时参考,相信对其他人也有用. 可访问性 可访问性基本上分为 2 ...

  3. System.Windows.Forms.Timer、System.Timers.Timer、System.Threading.Timer的差别和分别什么时候用

    System.Windows.Forms.Timer.System.Timers.Timer.System.Threading.Timer的 区别和用法http://space.itpub.net/1 ...

  4. 八十：memcached之安装与参数

    Memcached是一个高并发的内存键值对缓存系统,它的主要作用是将数据库查询结果,内容,以及其它一些耗时的计算结果缓存到系统内存中,从而加速Web应用程序的响应速度. 官网:http://memca ...

  5. MySQL 将 字符串 转为 整数

    MySQL 将 字符串 转为 整数 1.CAST(epr AS type) 1)type 为 SIGNED " AS SIGNED); 效果如下: 2)type 为 UNSIGNED &qu ...

  6. 添加 @ResponseBody出现错误的问题

    maven配置: <dependency> <groupId>org.codehaus.jackson</groupId> <artifactId>ja ...

  7. Django路由系统-URL命名&URL反向解析

    命名URL和URL反向解析 前言 起始样式,HTML中的href是写死的,不能更改,如下示例代码: # urls中 urlpatterns = [ url(r'^admin/', admin.site ...

  8. 【Deep Learning Nanodegree Foundation笔记】第 10 课：Sentiment Analysis with Andrew Trask

    In this lesson, Andrew Trask, the author of Grokking Deep Learning, will walk you through using neur ...

  9. Leetcode之动态规划（DP）专题-338. 比特位计数（Counting Bits）

    Leetcode之动态规划(DP)专题-338. 比特位计数(Counting Bits) 给定一个非负整数 num.对于 0 ≤ i ≤ num 范围中的每个数字 i ,计算其二进制数中的 1 的数 ...

  10. webdriervAPI(XPath元素定位)

    from  selenium  import  webdriver driver  =  webdriver.Chorme() driver.get("http://www.baidu.co ...