<!DOCTYPE html>
<html>
    <head>
        <title>单选按钮对齐</title>
        <style type="text/css">
            div {
                margin: 10px;
                padding-bottom: 10px;
                max-width:360px;
            }
            .title {
                float: left;
                width: 100px;
                text-align: right;
                padding-right: 10px;}
            .submit {
                text-align: right;}
        </style>     
    </head>
    <body>
    <h1>软件开发，成就梦想</h1>
    <h2>学编程，上利永贞网 https://www.liyongzhen.com/</h2> 
        <form  method="post">
            <div>
                <label for="name" class="title">用户名:</label>
                <input type="text" id="name" name="name" />
            </div>
            <div>
                <label for="password" class="title">密码:</label>
                <input type="password" id="password" name="password" />
            </div>
            <div>
                <span class="title">性别:</span>
                <input type="radio" name="gender" id="male" value="M" />
                <label for="male">男</label>
                <input type="radio" name="gender" id="female" value="F" />
                <label for="female">女</label><br />
            </div>
            <div class="submit">
                <input type="submit" value="提交" id="submit" />
            </div>
        </form>
    </body>
</html>

CSS表单2 组件排版的更多相关文章

  1. CSS 表单

    输入框前有图片 老板让你实现在输入框前有图片的功能.老板觉得用图片代替文字更有说服力. 要实现这样的功能很简单,它的原理是将图片放在内边距内. 代码 1 2 3 4 5 6 7 8 9 10 11 1 ...

  2. 翻译 | 玩转 React 表单 —— 受控组件详解

    原文地址:React.js Forms: Controlled Components 原文作者:Loren Stewart 译者:小 B0Y 校对者:珂珂君 本文涵盖以下受控组件: 文本输入框 数字输 ...

  3. vue_表单_组件

    表单.组件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

  4. form-create 3.0 版本发布，好用的Vue3版本动态表单生成组件

    form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成组件.支持2个UI框架,并且支持生成任何 Vue 组件.内置20种常用表单组件和自定义组件,再复杂 ...

  5. js 节点 document html css 表单节点操作

    js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...

  6. CSS表单设计

    今天我们开始学习<十天学会web标准(div+css)>的css表单设计,包含以下内容和知识点: 改变文本框和文本域样式 用图片美化按钮 改变下拉列表样式 用label标签提升用户体验 一 ...

  7. Web标准：九、CSS表单设计

    Web标准:九.CSS表单设计 知识点: 1.改变文本框和文本域样式 2.用图片美化按钮 3.改变下拉列表样式 4.用label标签提升用户体验   1)改变文本框和文本域样式 文本框标签:<i ...

  8. Vue基础-自定义事件的表单输入组件、自定义组件的 v-model

    Vue 测试版本:Vue.js v2.5.13 学习 Vue 的自定义事件的表单输入组件,觉得文档讲的不太细致,所以这里再细化一下: 如果不用 v-model,代码应该是这样: <myinput ...

  9. ccflow_005.请假流程-傻瓜表单-审核组件模式

    ccflow_005.请假流程-傻瓜表单-审核组件模式 ' 用审核组件演示各个流程应用 首先设置节点,填写请假单的 表单方案.选择内置傻瓜表单.我们之前创建的表单就回来了. 可以点击下面的设计傻瓜表单 ...

随机推荐

  1. Win10+Ubuntu双系统删除Ubuntu方法

    前情提要 Win10下试了许多种方法,什么MbrFix.EasyBCD.亦或是Boot Option.都不行.前两者不行,操作之后重启无法直接进入Windows,后者也不行,找不到所谓的Delete ...

  2. 20155219 mybash的实现

    第五周加分题--mybash的实现 题目要求 1.使用fork,exec,wait实现mybash 2.写出伪代码,产品代码和测试代码 3.发表知识理解,实现过程和问题解决的博客(包含代码托管链接) ...

  3. java 实现自定义事件

    import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; i ...

  4. tomcat访问错误调试方法

    生产环境中经常用到tomcat,所以还是要学一下tomcat的排错的 很重要的一点,就是实时查看catalina.out日志 执行tail -f catalina.out就会实时刷新日志了 catal ...

  5. 三、tcp、ip协议详细

    1. 什么是 TCP/IP? TCP/IP 是一类协议系统,它是用于网络通信的一套协议集合． 传统上来说 TCP/IP 被认为是一个四层协议 1) 网络接口层: 主要是指物理层次的一些接口,比如电缆等 ...

  6. NIO、BIO、AIO区别

    一.同步阻塞I/O(BIO): 同步阻塞I/O,服务器实现模式为一个连接一个线程,即客户端有连接请求时服务器就需要启动一个线程进行处理,如果这个连接不做任何事情会造成不必要的线程开销,可以通过线程池机 ...

  7. fork exec source的区别

    参考:http://www.cnblogs.com/bkygg/p/5023072.html 1:fork  运行的时候开一个sub_shell 执行调用的脚本,sub_shell执行的时候,pare ...

  8. 代码问题:【CF2】

    [CF2/CFCF/HCF]: C Ma, JB Huang, X Yang, et al. Hierarchical convolutional features for visual tracki ...

  9. FastCGI点滴

    FastCGI是一种二进制协议,用于将交互式程序与Web服务器连接.它是早期通用网关接口(CGI)的变体.FastCGI的主要目标是减少与Web服务器和CGI程序之间的接口相关的开销,允许服务器每单位 ...

  10. Program type already present: android.support.v4.widget.EdgeEffectCompat

    1.确保所有依赖包的 implementation 'com.android.support:appcompat-v7:25.4.0'是一样的 2.确保最外层的build.gradle中增加如下代码: ...