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. weblogic性能调优

    1.设置java参数: a) 编辑Weblogic Server启动脚本文件: /user_projects/domains/Domain_jgbs/bin/startWebLogic.sh /use ...

  2. [论文理解] FoveaBox: Beyond Anchor-based Object Detector

    FoveaBox: Beyond Anchor-based Object Detector Intro 本文是一篇one-stage anchor free的目标检测文章,大体检测思路为,网络分两路, ...

  3. windos批处理启动redis与哨兵

    为各个启动单独建立脚本后用总的bat调用 创建脚本,redis6379.bat脚本内容:@echo offtitle redis-serverset ENV_HOME6379="G:\Red ...

  4. mongodb 操作笔记

    切换库:use 库名 显示所有的数据库:show dbs 创建集合:db.createCollection("collection_name",{capped:true,size: ...

  5. Linux 命令速记本

    # 比较1.txt和2.txt的差异 comm [---] .txt .txt # 求1.txt和2.txt的MD5用于区分两个文件是否相同 md5sum .txt .txt #tr 用于转换或删除文 ...

  6. java web 开发三剑客 -------电子书

    Internet,人们通常称为因特网,是当今世界上覆盖面最大和应用最广泛的网络.根据英语构词法,Internet是Inter + net,Inter-作为前缀在英语中表示“在一起,交互”,由此可知In ...

  7. jsp页面中使用javabean

    <%@ page language="java" import="java.util.*,com.loaderman.demo.b_cases.*" pa ...

  8. 代码实现:获取一个文本上每个字符出现的次数,将结果写在times.txt上

    package com.loaderman.test; import java.io.BufferedReader; import java.io.BufferedWriter; import jav ...

  9. java.sql.SQLException: Listener refused the connection with the following error: ORA-12505, TNS:list

    package DisplayAuthors; import  java.sql.*; public class DisplayAuthors  { private static final  Str ...

  10. 关于ansbile

    YAML语法规则 规则一:缩进(一个缩进两空格,注意一定不用tab) 规则二:冒号(每个冒号后一定要有空格) 规则三:短横线 - (短横线后面要空格) 编写案例 ansible-playbook -- ...