Bootstrap之製作登入表單

阿新 • • 發佈：2019-01-12

程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <style>
        .login {
            color: white;
            height: 38 
px;
            width: 300px;
            background-color: #2b669a;
        }
    </style>
</head>
<body>
<div class="container">
    <h2 class="text-center">請登入</h2>
    <div class="row">
        <form class="form-horizontal col-md-offset-4 col-md-4">
            <div 
 class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">郵箱</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                </div>
            </div 
>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">密碼</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox">記住密碼
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default login ">登入</button>
                </div>
            </div>
        </form>
    </div>
</div>


</body>
</html>

效果圖

Bootstrap之製作登入表單

程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Bootstrap之表格、表單應用

程式碼： 1 <!DOCTYPE html> 2 <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="UTF-8"/>

Bootstrap(4)之表格和表單

首先來說一下表格，bootstrap的表格有專門的class="table"。<table class="table table-hover table-bordered "> <caption>Table基本案例</cap

Flask入門之flask-wtf表單處理

color _for 驗證 sage 視圖 cnblogs 信息 jin boot 參考文章 1. 使用 WTForms 進行表單驗證第11集 #Sample.py # coding:utf-8 from flask import Flask,render_templ

php 圖片上傳之利用form表單上傳

idt cti contain 開啟 1.7 png ret 選擇圖片 post 、利用form表單上傳此種方式是最原始的上傳方式，前端就是簡單的form表單，後端我們有PHP處理傳輸過來的文件。首先看前端的代碼 upload.html 1 2 3 4

Django系列之form渲染表單後css樣式丟失

pda 我們 bus 初始化別人 field 屬性解決 ipmi 最通用的form寫法我們經常看各大網站上寫這樣的form寫法 class SYSAdminPhysicalForm(forms.ModelForm): ‘‘‘ this form for

Bootstrap學習筆記(四)表單input

控件屬性 icon val 制作表單 pan 選擇提示信息 AI 單行輸入框，常見的文本輸入框，也就是input的type屬性值為text。在Bootstrap中使用input時也必須添加type類型，如果沒有指定type類型，將無法得到正確的樣式，因為Bootstra

SpringMVC+AJAX登入表單驗證問題

畢業設計，使用springMVC+AJAX（jquery）實現登入表單驗證問題，將遇到的問題記錄下來 1 controller層可以接收到前臺請求引數，但是success和error都不執行無圖言叼這是js <script type="text/javascript">

dwz問題之頁面提交表單，僅區域性重新整理table表格

一、問題後臺管理系統有一個頁面，點選提交按鈕提交表單時，頁面整體都重新整理了。原則上是提交表單後，表單資訊儲存原來的，只重新整理表格。二、經過接下來為了解決問題，開始找dwz框架裡面區域性重新整理的功能。一種是API呼叫方式： $('#xxID').lo

React學習之旅----獲取表單輸入的值，雙向繫結

react中實現雙向繫結input輸入框值 import React, { Component } from 'react'; class Event extends Component { constructor(props) { super(props) this.sta

layui之獲取form表單的radio

form表單是這樣的： <div class="layui-form-item"> <label class="layui-form-label">單選框</label> <div class="layui-input-bloc

Bootstrap學習筆記(二) 表單

3-1 基礎表單　　單中常見的元素主要包括：文字輸入框、下拉選擇框、單選按鈕、複選按鈕、文字域和按鈕等。　　在Bootstrap框架中，通過定製了一個類名`form-control`，也就是說，如果這幾個元素使用了類名“form-control”，將會實現一些設計上的定製效果。　　

Bootstrap -- 表格樣式、表單佈局

Bootstrap -- 表格樣式、表單佈局 1. 表格的一些樣式舉例： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html

flask外掛系列之Flask-WTF表單

flask_wtf是flask框架的表單驗證模組，可以很方便生成表單，也可以當做json資料互動的驗證工具，支援熱插拔。安裝 pip install Flask-WTF Flask-WTF其實是對wtforms元件的封裝，使其支援對flask框架的熱插拔。簡單使用 # app.py from flask

Django個人部落格開發之高階優化表單、模型

表單自定義校驗之前的學習過程當中講解了form表單的定義，首先，我們來回顧一下form表單的定義和使用的流程以文章的評論為案例。 1、定義form.py檔案，在form檔案當中定義表單校驗類 2、在檢視當中呼叫form表單類 3、前端渲染表單類總的看起來，學習的過程當中要注意以下幾點

getFieldDecorator用法（一）——登入表單

之前使用antd的ui表單，卻沒發現這麼好用的用法，推薦給大家 import React from "react"; import { Card, Form, Input, Button, message, Icon, Checkbox } from "antd"; con

微擎開發模組之ajax提交表單

大家好，用了csdn這麼久，從來沒想著寫點東西出來，這是我的第一篇博文，主要詳細講解一下微擎ajax提交表單機制。 html程式碼部分我們按照如下方式寫 <form action="" method="post" > <

[Swift通天遁地]二、表格表單-(17)製作在表單左側新增單選和複選元件的表單行

本文將演示如何製作在表單左側新增單選和複選元件的表單行。在專案導航區，開啟檢視控制器的程式碼檔案【ViewController.swift】現在開始編寫程式碼，實現單選和複選組表單行到功能。 1 import UIKit 2 //首先在當前類檔案中， 3 //引入以及安裝的第三方類庫

09 實現Django自帶的註冊\登入\退出登入(表單)功能

1、概述在我們瀏覽網頁的時候，經常會碰到對一個網站的註冊，然後用註冊號進行登入，登入後進行退出的操作。當用戶註冊登入網站後，網站的顯示資訊會根據使用者的許可權來設定。本篇主要簡單介紹django自身

使用者登入表單

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/

Bootstrap之製作登入表單

程式碼

效果圖

相關推薦