整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
一、實驗?zāi)繕?/strong>
寫一個注冊頁面。頁面如下:
# 二、實驗知識
bootstrap的表單提供下列類型的布局：
- 垂直表單（默認）
- 內(nèi)聯(lián)表單
- 水平表單
水平排列的表單
通過給表單添加.form-horizontal類，并聯(lián)合使用Bootstrap預(yù)置的柵格類，可以將 label標簽和控件組水平并排布局。這樣做將改變 .form-group 的行為，使其表現(xiàn)為柵格系統(tǒng)中的行（row），因此就無需再額外添加 .row 了。
創(chuàng)建表單的基本步驟：
1.向form元素添加role="form"。如果是水平表單，添加class="form-horizontal"。
2.把標簽和控件放在一個帶有class=".form-group"的div中。
3.向所有的文本元素都添加class=".form-control"。
# 三、實驗步驟
打開src/main/webapp/index.html,
1.先設(shè)置表單為水平排列。
2.在form元素里添加表單分組，標題為注冊。
3.設(shè)置標簽和輸入控件.
完整代碼鏈接：https://www.itbegin.com/apps/mooc/77a8ddd1229d4556956b49cb82c48708
ITbegin是專注于在線編程應(yīng)用和研發(fā)的互聯(lián)網(wǎng)公司，官網(wǎng)：www.itbegin.com
TML:完成頁面的內(nèi)容展示
CSS：完成頁面樣式的控制，美化頁面，完成頁面的布局。
表單：用于采集用戶輸入的數(shù)據(jù)。用于和服務(wù)器進行交互。
form:用于定義表單的。可以定義一個范圍(代表用戶采集數(shù)據(jù)的范圍)
屬性：action:指定提交數(shù)據(jù)的url(指的就是把數(shù)據(jù)提交到哪里)
method:指定提交方式
分類：一共有7種，2種比較常用。
get:1.請求參數(shù)會在地址欄顯示
2.請求參數(shù)的長度是有限制的。
3.請求不安全
post:1.請求參數(shù)不會在地址欄顯示，會封裝在請求體中。
2.請求參數(shù)的長度沒有限制
3.較為安全
表單里面的數(shù)據(jù)要想被提交，必須指定它的name屬性
表單項標簽
input:可以通過type屬性值，改變元素展示的樣式。
type屬性：text:文本輸入框，默認值
placeholder:指定輸入框的提示信息，當輸入框的內(nèi)容發(fā)生變化，會自動情況提示信息。
password:密碼輸入框
radio：1.單選框(要想讓多個單選框?qū)崿F(xiàn)單選的效果，則多個單選框的name屬性值必須一樣)
2.一般會給每一個單選框提供value屬性，指定其被選中后提交的值。
3.checked屬性可以指定默認值
checkbox:復(fù)選框:
1.一般會給每一個單選框提供value屬性，指定其被選中后提交的值。
2.checked屬性可以指定默認值
file:文件選擇框
hidden:隱藏域，用于提交一些信息
按鈕:
submit:提交按鈕。可以提交表單
button:普通按鈕
image:圖片提交按鈕
src屬性指定圖片的路徑
label:指定輸入項的文字描述信息
注意：lable的for屬性一般會和input的id屬性值對應(yīng)。如果對應(yīng)了，點擊lable區(qū)域，會讓input輸入框獲取焦點。
select:下拉列表
子元素：option,指定列表項
textarea:文本域
上網(wǎng)的時候，經(jīng)常需要輸入一些信息，如用戶注冊資料、用戶意見等。填寫完信息后，單
擊提交按鈕，就可以將有關(guān)信息提交給網(wǎng)站。這里要填寫的文本框、下拉列表框等元素組合
在一起就稱為表單（form)。就ASP來說，表單設(shè)計非常重要，因為在大部分情況下,客戶端
都是通過表單將信息提交給服務(wù)器端。只有這樣，才能實現(xiàn)客戶端和服務(wù)器端的互動與交流
，也才能實現(xiàn)“真正”的動態(tài)網(wǎng)頁程序設(shè)計。
現(xiàn)在介紹如何編輯一個表單，至于向服務(wù)器端提交表單信息，將在后面詳細講解。下面先來
看一個典型的表單例子：
<html>
<head>
<title>用戶注冊表單示例</mie>
</head>
<body leftmargin="100">
<h1 align="cemer">用戶注冊</h1>
<p><font color="red">以下內(nèi)容請如實填寫，其中帶有*號的欄目是必須填寫的 <fonn
name="frmUserReg" methods="POST" action="mailto:jjshang@263.net" >
<p>請選擇用戶名:
<input type="text" name="txtUserld" size="15">*
<P>請輸入你的密碼：
<input type="password" name="txtPwd" size="8" maxlength="8">*(密碼不能超過8位
）
<P>請再次輸入密碼：
<input type="password" name="txtPwd2" size="8" maxlength="8">*
<p>請輸入你的姓名：
<input typc="text" name="txtUserName" size="15">*
<p>請選擇你的性別：
<input type="Radio" name="rdoSex" value="male" checked >男
<input type="Radio" name="rdoSex" value="femail">女*
<p>請輸入你的生日：
<input type="text" name"txtYear" size=”4"> 年
<input type="text" name="txtMonth" size="2">月
<input type="text" name="txtDay" size="2">日
<P>請選擇你的最髙學(xué)歷：
<select size="1" namc="sltEducation">
<option value="髙中">高中</option>
<option value="本科" selectd>大學(xué)本科</option>
<option value="碩士">碩士</option>
<option value="博士">博士</option>
</select>
<p>請選擇你的愛好：
<input type="checkbox" name="chkLove" value="book">讀書
<input type="checkbox" name="chkLove" value="movie">看電影
<input type="checkbox" name="chkLove" value="travel">旅游
<input type="checkbox" name="chkLove" value="other">其他
<P>你有什么意見嗎？
<textarea name="txtMemo" rows="4" cols="40"></tcxtarea>
<p align="center"> <input type="submit" name="btnSubmit" value="提交">
<input type="reset" name="btnReset" value="取消">
</form>
</body>
</html>
下面來詳細介紹構(gòu)成表單的各個標記及屬性。
<form>與</form>標記:該標記用于定義一個表單，任何一個表單都是以<form>開始，以</form>結(jié)束。在其中包含了一些表單元素，如文本框，按鈕，下拉列表框等。其屬性名稱有name，methed，action。
<input>與</input>標記：該標記用于在表單中定義單行文本框，密碼框，單選框，復(fù)選框，按鈕等表單元素。不同的元素有不同的屬性，詳細的屬性名稱有type,name,size,maxlengh,value,checked。
<select>與</select>標記：該標記用于定義一個列表框，其中的一個<option>標記就是列表框中的一項。其中有name,size,multiple等屬性。
<textarea>與</textarea>:該標記用于定義一個多行文本框（也叫文本區(qū)域），常用于需要輸入大量文字內(nèi)容的網(wǎng)頁中，如留言板，BBS等。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
