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