css登錄檔單案例

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .form_con{
            width: 400px;
            height: 460px;
            background:#f2f2f2;
            margin: 50px auto 0;
            padding: 20px;
        }
        .form_con label{
            width: 80px;
            text-align: right;
            /* 在這裡用浮動的原因是因為lable和input都是行元素,不換行,所以用浮動會讓其自動排列,
            又因為兩個的長度比較長致使下面的標籤會在其下面排列 */
            float: left;
        }
        .form_con h3{
            margin: 0px;
            border-bottom: 1px solid #ddd;
            font-size: 22px;
            line-height: 50px;
        }
        .input_text{
            width: 240px;
            height: 24px;
            border: 0;
            outline: none;
        }

        .input_text2{
            width: 240px;
            height: 24px;

        }

        .input_select{
            
            width: 120px;
            height: 24px;

        }
        .m180{

            margin-left: 80px;
        }



    
    </style>
</head>
<body>
   <div class="form_con">
       <h3>登錄檔單</h3>
        <form action="">
            <label for="">姓名:</label>
            <input type="text" name="" id="" class="input_text">
            <br>
            <br>
            <label for="">密碼:</label>
            <input type="password" name="" id="" class="input_text">
            <br>
            <br>

            <label for="">性別:</label>
            <!-- 兩個選一個是因為name設定了相同的值 -->
            <input type="radio" name="gender" value="0">男
            <input type="radio" name="gender" value="1">女
            <br>
            <br>
            <label for="">愛好:</label>
            <!-- 多重選擇用checkbox -->
            <input type="checkbox" name="like" value="0">唱歌
            <input type="checkbox" name="like" value="1">跑步
            <input type="checkbox" name="like" value="2">游泳
            <br>
            <br>
            <label for="">照片</label>
            <!-- 選擇檔案只需要將type設成file即可 -->
            <input type="file" name="person_pic">
            <br>
            <br>
            <label for="">個人描述:</label>
            <!-- 這裡比較特殊,個人描述這一塊的效果用input文字框是做不出來的,要用textarea -->
            <textarea name="about" id="" cols="30" rows="10" class="input_text2"></textarea>
            <br>
            <br>
            <label for="">籍貫:</label>
            <select name="" id="" class="input_select">
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">廣州</option>
                <option value="3">深圳</option>
            </select>
            <br>
            <br>
            <input type="submit" value="提交" class="m180">
            <input type="reset" value="重置">
        </form>


   </div>
</body>
</html>

程式碼完成後的效果如下:

css登錄檔單案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev

HTML+CSS第四課：表單標籤的使用-製作登錄檔單

知識點：表單標籤、表單元素表單在網頁中應用比較廣泛，如申請qq賬號、電子郵箱等，使用者需要首先填寫註冊資訊，然後才能提交；通俗講，表單就是一個將使用者資訊組織起來的容器，將使用者填寫的內容放置在表單容器中，當用戶單擊提交按鈕的時候，表單會將資料統一發送給伺服器！表單的作用

HTML+CSS實現的簡單登錄檔單

效果總覽：具體程式碼實現 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>提交使用者資訊</t

手機wap端使用者登錄檔單（html+css）

實現效果： html程式碼： <div class="login"> <form action="*跳轉介面*" method="post" onsubmit="return checkForm()"> <

編寫一個僱員登錄檔單並進行驗證

Javaweb第二章課後習題編寫一個僱員註冊的表單，要求輸入以下內容：僱員編號、僱員姓名、僱員工作、僱傭日期、基本工資和獎金。並對錶單進行JavaScript驗證，驗證要求如下： 1. 僱員編號：只能是數字； 2. 僱員姓名：不能為空； 3. 僱員工作：不能為空；

登錄檔單驗證 json格式傳參

1.加入json相關架包 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp

jsp 製作一個登入登錄檔單

"><html> <head> <title>My JSP 'signin.jsp' starting page</title> </head> <body>

php使用者登錄檔單驗證

註冊介面 register.html <h1>使用者註冊</h1> <form method="post" action="register_verify.php"> <input type="te

登錄檔單是要左對齊還是右對齊

上一篇圍繞對齊和連續流這兩個設計原則，談了資訊設計中用到的幾種對齊方法以及和連續流的關聯，這一篇嘗試用這些原則分析登錄檔單選項該怎麼設計。登錄檔單，也就是我們在註冊網路產品或者填寫信用卡申請表時的東西，目前主流的表單有兩種，一種是專案左對齊，另一種是專案靠著輸入框作右

JQuery 實現登錄檔單校驗

進行表單資料的驗證可謂是很有必要的，我們都會在網頁上先進行一下表單驗證，然後伺服器端再次進行驗證，來確保使用者提交資料的準確性,與減輕伺服器的壓力. 表單頁面： <body> <form action="index.h

一款css3很美的iphone登錄檔單樣式

1 <!DOCTYPE html> 2 <html lang=""> 3 <head> 4 <title>Animated Checkboxes using CSS3</title> 5 <meta char

Web前端 | 登錄檔單驗證

註冊格式要求：頁面中所有項均為必填項登入賬號：只能是數字或字母且以字母開頭密碼：大於8位且需要有字母和數字之外的字元姓名：格式為2-4個漢字出生年月日：格式為yyyy-mm-dd 【eg：1998-02-17】郵編：正確的6位數字郵編E-mail：基本格式Html程式程式碼如

AngularJS 登錄檔單驗證

//email驗證 $(function(){ //input標籤獲取焦點/失去焦點時呼叫方法 $(":input[name='email']").blur(function(){ //獲取inp

javascript登錄檔單

html部分：<html> <head> <title>登錄檔單</title> <script language="JavaScript" src="check.js"></script> </

ASP簡單使用者登錄檔單

#index.aspx檔案內容 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits

登錄、註冊案例集合實現

登錄註冊登陸註冊案例分析：我們現在寫代碼需要面向對象，我們必須先找到能完成某個功能的類，接著調用裏面的方法完成它登陸註冊案例中的類：用戶類成員變量：用戶名，密碼成員方法：登陸，註冊功能

Linux centos 跳過管理員密碼進行登錄（單用戶模式、救援模式）

remount 無法 linu 單用戶 blog int 成功程序 bios 　　這裏列舉了兩種更改或者取消管理員密碼登錄Linux系統的方法，其實兩種方法類似，都是想方設法跳過用戶認定，直接更改用戶文件、更改密碼的過程。　　為了跳過系統正常啟動過程中的某些步驟，必須知

弄一個系統登錄菜單

eset etc () name nco clas path public str 1 <%@ page contentType="text/html" pageEncoding="UTF-8"%> 2 <% 3 String path = re

node js實戰：帶數據庫，加密的註冊登錄表單

settings else input 是否 rip dig code setting 個人 demo 註冊效果：登陸效果：數據庫截圖：數據庫操作 db.js //這個模塊裏面封裝了所有對數據庫的常用操作 var MongoClient =

sso單點登錄，單點登錄原理圖，單點登錄圖解，單點登錄

align nbsp 技術蕃薯耀 alt blog log tro png sso單點登錄，單點登錄原理圖，單點登錄圖解，單點登錄 ============================== ?Copyright 蕃薯耀 2017年11月20日 http://www

css登錄檔單案例

程式碼完成後的效果如下:

相關推薦