jsp表單text設定邊框 表單案例

2021-10-13 16:22:54 字數 2088 閱讀 9925

首先上最終頁面效果圖:

下面是製作的詳細步驟:

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 獲取表單域的陣列值。在獲取表...