CSS執行個體教程:製作漂亮的網頁表單

來源:互聯網
上載者:User

初中級練習,高手朋友們可以飄過。要求達到如下圖所示的效果,各位不妨試一試~

 

代碼如下:

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

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>Form demo</title>

<style type="text/css">

<!--

body {

font-family: Arial, Helvetica, sans-serif;

font-size:12px;

color:#666666;

background:#fff;

text-align:center;

}

* {

margin:0;

padding:0;

}

a {

color:#1E7ACE;

text-decoration:none;

}

a:hover {

color:#000;

text-decoration:underline;

}

h3 {

font-size:14px;

font-weight:bold;

}

pre,p {

color:#1E7ACE;

margin:4px;

}

input, select,textarea {

padding:1px;

margin:2px;

font-size:11px;

}

.buttom{

padding:1px 10px;

font-size:12px;

border:1px #1E7ACE solid;

background:#D0F0FF;

}

#formwrapper {

width:450px;

margin:15px auto;

padding:20px;

text-align:left;

border:1px solid #A4CDF2;

}

fieldset {

padding:10px;

margin-top:5px;

border:1px solid #A4CDF2;

background:#fff;

}

fieldset legend {

color:#1E7ACE;

font-weight:bold;

padding:3px 20px 3px 20px;

border:1px solid #A4CDF2;

background:#fff;

}

fieldset label {

float:left;

width:120px;

text-align:right;

padding:4px;

margin:1px;

}

fieldset div {

clear:left;

margin-bottom:2px;

}

.enter{ text-align:center;}

.clear {

clear:both;

}

-->

</style>

</head>

<body>

<div id="formwrapper">

  <h3>登入使用者登入</h3>

  <form action="" method="post" name="apLogin" id="apLogin">

    <fieldset>

    <legend>使用者登入</legend>

    <div>

      <label for="Name">使用者名稱</label>

      <input type="text" name="Name" id="Name" size="18" maxlength="30" />

      <br/>

    </div>

    <div>

      <label for="password">密碼</label>

      <input type="password" name="password" id="password" size="18" maxlength="30" />

      <br/>

    </div>

    <div class="cookiechk">

      <label>

      <input type="checkbox" name="CookieYN" id="CookieYN" value="1" />

      <a href="#" title="選擇是否記錄您的資訊">記住我</a></label>

      <input name="login791" type="submit" class="buttom" value="登入" />

    </div>

    <div class="forgotpass"><a href="#">您忘記密碼?</a></div>

    </fieldset>

  </form>

  <br/>

  <h3>未註冊建立帳戶</h3>

  <form action="" method="post" name="apForm" id="apForm">

    <fieldset>

    <legend>使用者註冊</legend>

    <p><strong>您的電子郵箱不會被公布出去,但是必須填寫.</strong> 在您註冊之前請先認真閱讀服務條款.</p>

    <div>

      <label for="Name">使用者名稱</label>

      <input type="text" name="Name" id="Name" value="" size="20" maxlength="30" />

      *(最多30個字元)<br/>

    </div>

    <div>

      <label for="Email">電子郵箱</label>

      <input type="text" name="Email" id="Email" value="" size="20" maxlength="150" />

      *<br/>

    </div>

    <div>

      <label for="password">密碼</label>

      <input type="password" name="password" id="password" size="18" maxlength="15" />

      *(最多15個字元)<br/>

    </div>

    <div>

      <label for="confirm_password">重複密碼</label>

      <input type="password" name="confirm_password" id="confirm_password" size="18" maxlength="15" />

      *<br/>

    </div>

    <div>

      <label for="AgreeToTerms">同意服務條款</label>

      <input type="checkbox" name="AgreeToTerms" id="AgreeToTerms" value="1" />

      <a href="#" title="您是否同意服務條款">先看看條款?</a> * </div>

    <div class="enter">

      <input name="create791" type="submit" class="buttom" value="提交" />

      <input name="Submit" type="reset" class="buttom" value="重設" />

    </div>

    <p><strong>* 在提交您的註冊資訊時, 我們認為您已經同意了我們的服務條款.<br/>

      * 這些條款可能在未經您同意的時候進行修改.</strong></p>

    </fieldset>

  </form>

</div>

</body>

</html>



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。