這個(gè)得用動(dòng)態(tài)語言比如php，jsp 獲取參數(shù)，之后顯示 用php的_POST可以獲取這個(gè)參數(shù)，用echo 將其輸出！
在JS中，可以使用`document.createElement`方法來創(chuàng)建一個(gè)form表單元素。下面是一個(gè)示例：```javascript// 創(chuàng)建form元素var form = document.createElement("form");// 設(shè)置form屬性form.method = "post";form.action = "/submit-form";// 創(chuàng)建input元素var input = document.createElement("input");input.type = "text";input.name = "username";// 將input元素添加到form中form.appendChild(input);// 將form元素添加到頁面中document.body.appendChild(form);```上述代碼會(huì)創(chuàng)建一個(gè)包含一個(gè)輸入框的表單，并將其添加到頁面中。你可以根據(jù)需要修改屬性、添加更多的表單元素，并將它們添加到form元素中。
html中獲取表單數(shù)據(jù)的的方法一般有兩種，一個(gè)是使用form表單的action屬性將表單的數(shù)據(jù)提交給后臺，另外一種就是使用JavaScript方法獲取表單的數(shù)據(jù)，然后通過ajax傳送給后臺。工具原料：編輯器、瀏覽器一、使用表單的方法提交數(shù)據(jù)1、利用form表單的action屬性來獲取表單的數(shù)據(jù)并提交，代碼如下：12345
2、以上代碼中method指定提交數(shù)據(jù)的方法為get，action的值是表單數(shù)據(jù)提交的地址。二、使用JavaScript方法來獲取表單的數(shù)據(jù)的方法1、可以使用JavaScript的選擇器選擇表單的元素并獲取其輸入的數(shù)據(jù)，代碼如下：123456789 2、其中$('#bt1').val()就是獲取input輸入內(nèi)容的值關(guān)于這個(gè)問題，可以使用CSS來實(shí)現(xiàn)form表單居中，具體方法如下：
1. 設(shè)置form的寬度為固定值或百分比，例如設(shè)置寬度為50%：
``` css
form {
width: 50%;
}
```
2. 設(shè)置form的左右margin為auto：
``` css
form {
width: 50%;
margin: 0 auto;
}
```
這樣就可以讓form表單在頁面中水平居中了。
完整的CSS代碼示例：
``` css
form {
width: 50%;
margin: 0 auto;
}
```
需要注意的是，以上方法適用于form表單是塊級元素的情況，如果form表單是內(nèi)聯(lián)元素，可以將其設(shè)置為塊級元素，例如：
``` css
form {
display: block;
width: 50%;
margin: 0 auto;
}
```
表單提交有兩種方法：GET和POST。
GET方法將表單數(shù)據(jù)附加到URL后面，是一種簡單的提交方式，比較適用于小型的數(shù)據(jù)傳輸，但不適合傳輸敏感信息，因?yàn)閿?shù)據(jù)會(huì)顯示在URL上。
POST方法通過HTTP請求發(fā)送表單數(shù)據(jù)到服務(wù)器，數(shù)據(jù)不會(huì)顯示在URL上，比較適合傳輸敏感信息，但相對GET方法較為復(fù)雜。
一般來說，GET方法適用于對數(shù)據(jù)進(jìn)行查詢或檢索，而POST方法適用于修改或添加數(shù)據(jù)。選擇哪種方法需要考慮到數(shù)據(jù)的大小、安全性等因素。
1. 先用el-form表單組件實(shí)現(xiàn)布局
用戶名和密碼輸入框，記住密碼單選框，登錄按鈕
:rules="rules"綁定表單校驗(yàn)規(guī)則，
:model="user"進(jìn)行表單校驗(yàn)時(shí)，需要綁定輸入的信息數(shù)組
hide-required-asterisk=false 設(shè)置是否顯示必填字段的標(biāo)簽旁邊的紅色星號
ref="ruleForm" 將按鈕和表單關(guān)聯(lián)起來，好進(jìn)行點(diǎn)擊事件的操作
2.v-model實(shí)現(xiàn)雙向綁定
3.js-sha256插件實(shí)現(xiàn)密碼加密
4. 實(shí)現(xiàn)登錄
1） 判斷valid的值，為true時(shí)表示校驗(yàn)通過，獲取用戶名和加密后的密碼
2）判斷記住密碼的單選框是否勾選，勾選狀態(tài)就將帳號和未加密的密碼和勾選狀態(tài)true保存到cookie中,checked表示勾選狀態(tài)
3）請求登錄的接口
4） 請求登錄接口成功后，獲取token，將token儲(chǔ)存到cookie中，獲取用戶信息，將用戶信息儲(chǔ)存到vuex中
5）跳轉(zhuǎn)到index主頁面
5. 當(dāng)vue實(shí)例創(chuàng)建完成后，在created鉤子函數(shù)中去實(shí)現(xiàn)enter登錄
6. 當(dāng)頁面剛掛載完成時(shí)，在mounted鉤子函數(shù)中去判斷帳號和密碼和勾選狀態(tài)是否存在cookie中，是的話獲取用戶和密碼和勾選狀態(tài)，顯示在頁面上，實(shí)現(xiàn)記住密碼功能
form表單是不允許嵌套的，你可以利用ajaxFileUpload異步實(shí)現(xiàn)圖片上傳，這樣交互效果也會(huì)更漂亮一些
要設(shè)置表單的邊框大小，可以通過CSS樣式來實(shí)現(xiàn)。首先，需要給表單元素添加一個(gè)class或id屬性，然后在CSS中為該元素設(shè)置邊框樣式。可以使用border屬性來設(shè)置邊框的樣式、寬度和顏色，例如：border: 1px solid #ccc; 表示設(shè)置邊框?qū)挾葹?像素，邊框樣式為實(shí)線，邊框顏色為#ccc。此外，還可以使用border-width、border-style、border-color等屬性來分別設(shè)置邊框的寬度、樣式和顏色。通過這些屬性的組合，可以實(shí)現(xiàn)不同樣式的邊框效果。
struts2中的Action接收表單傳遞過來的參數(shù)有3種方法： 如，登陸表單login.jsp： <form action="login" method="post" name="form1"> 用戶名：<s:textfield name="username"/><br/> 密 碼：<s:password name="password"/><br/> <s:submit value="提交"/> </form> 1.在Action類中定義表單屬性，兩者屬性名稱必須一致。提供setter，getter方法。即可接收到表單傳過來的參數(shù). 這種接收參數(shù)的方法，方便簡單，但是結(jié)構(gòu)性不是很好，且當(dāng)表單傳遞來的參數(shù)很多的時(shí)候，整個(gè)Action類中充斥著setter，getter方法，程序結(jié)構(gòu)不是很美觀。 2.把表單傳遞過來的參數(shù)封裝成一個(gè)類，然后調(diào)用其中的屬性. 如，把login.jsp頁面要傳來的參數(shù)進(jìn)行封裝 Private String username; private String password; public String getUsername() { return username; } public void setUsername(Stringusername) { this.username = username; } public String getPassword(){ return password; } public void setPassword(String password) {this.password = password; } 然后再Action方法中，定義該類的對象就可以了， 如 public class loginAction extends ActionSupport{ private Users users; Public Users getUsers(){ return users; } public void setUsers(Users users){ this.users=users; } } 通過這種方法傳值，還必須在jsp頁面做一下處理，login.jsp中from1的屬性名應(yīng)該改成這樣： 登陸表單login.jsp： <form action="login" method="post" name="form1"> 用戶名：<s:textfield name="users.username"/><br/> 密 碼：<s:password name="users.password"/><br/> <s:submit value="提交"/> </form> 這種方法，在struts開發(fā)中是很常用的一種方法！ 3.通過實(shí)現(xiàn)ModelDriven接口接收表單數(shù)據(jù)(還沒有用過，可以嘗試。) 首先Action類必須實(shí)現(xiàn)ModelDriven接口，同樣把表單傳來的數(shù)據(jù)封裝起來，Action類中必須實(shí)例化該對象，并且要重寫getModel()方法 public class loginAction extends ActionSupport implements ModelDriven<Users>{ private Users users =new Users(); public Users getModel(){ return users; } }
1、首先打開hbuilder編輯器，新建一個(gè)html文件，寫一個(gè)form表單，并設(shè)置class屬性值，form中設(shè)置兩個(gè)input標(biāo)簽：
2、然后在上方的style標(biāo)簽中設(shè)置form的樣式，在form的class屬性中設(shè)置寬高屬性，以px為單位設(shè)置寬高，背景顏色設(shè)置另一種顏色，最后設(shè)置form的盒子模型邊距即可：
3、最后打開瀏覽器就可以看到，一個(gè)寬250px高30px的的form表單了：
