首先上最終頁面效果圖:
下面是製作的詳細步驟:
1.新增個人資訊
個人資訊
姓名: 此時會出現如下效果頁面:
2.在個人資訊後面新增性別選擇資訊
請選擇性別男女
此時會出現如下效果頁面:
3.新增意見輸入框和提交按鈕(下面加粗**),完整表單的**如下所示:
個人資訊
姓名:
請選擇性別男女
意見
請提出意見及建議:
提交
此時會出現如下效果頁面:
此時會出現如下效果頁面:
5.第二步,拉開上下區塊的間距:.
background-color:#fff;
margin-top: 10px;
margin-bottom: 10px;
6.設定姓名、郵件位址、意見和它們的輸入框兩行顯示,並且最大寬度為20em。
為了區別於性別中的label和input,我們它們加上不同的類,field-text 和field:
姓名:男
女請提出意見及建議:
新增css**如下:
.field-text
.field-text label,.field-text input,.field-text textarea
此時會出現如下效果頁面:
8.輸入框獲得聚焦效果:藍色邊框且周圍有藍色陰影
.field-text input:focus,.field-text textarea:focus{
box-shadow:0 0 .5em rgba(93, 162, 248, 0.5);
border-color: #5da2f8;
此時會出現如下效果頁面:
9.拉開性別的單選按鈕和文字的間距
.field input {
margin-right: 0.75em;
10.最後:修飾提交按鈕
button{
border:0;
padding:.5em 1em;
cursor:pointer;
border-radius:.25em;
color:#fff;
background-color:#173b6d;
font-size:1em;
至此,該案例便完成了:
jsp表單驗證大全
表單驗證 表單驗證,可分為 n 在伺服器端驗證表單 n 在客戶端驗證表單 在伺服器端驗證表單,是指通過內建物件request獲取客戶端通過表單提交的資料後,進行驗證。在客戶端驗證表單,是指在客戶端的瀏覽器對使用者輸入的資訊進行合法性驗證,如使用者名稱或密碼是否為空,電子郵件是否含有 和 等字元,身份...
jsp的表單提交
原先一直以為不管的是表單提交還是url傳值都是不能傳遞中文的,但是在公司專案中卻看到了,用表單提交中文字串的例項,我真的 見多識廣 啊!很菜 更菜 誰有我菜 還有少用request.getparameter request.getattribute 等與servlet 有關的api,保持action...
JSP 獲取表單引數
在頁面中可大量使用 request 物件來獲取表單域的值,獲取表單域的值有如下兩個 方法。string getparamete string para mn ame 獲取表單域的值。string getparameterva1ues string para mn ame 獲取表單域的陣列值。在獲取表...