使用原生HTML、CSS和JavaScript实现特定布局表单及点击“修改”按钮提交功能
能
```html
<!DOCTYPE html>
<html>
<head>
<style>
.form-container{
width: 300px;
padding: 20px;
background-color: #f1f1f1;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button { background-color:#4CAF50 ; color:#ffffff ; padding : 14px 20px ; margin : 8px 0 ; border : none ; cursor : pointer ; width : 100% ; } button :hover { opacity : 0.8} .cancelbtn{background-color:#f44336;} .cancelbtn, .signupbtn {float:left;width:50%}.container{padding : 16 px;} body{background-repeat : no - repeat ; background - size ：cover} </style> </head> <body background="bg.jpg"> <div class="form - container"> <h2 style="text - align：center">修改</h2><br/> <label for = "uname"><b > 用户名 </b></label><br/> <input type = "text" placeholder="请输入用户名" name = "uname" required/><br/> <label for = "psw"><b > 密码 </b></label><br/> <input type = "password" placeholder="请输入密码" name = "psw" required/><br/> <!-- 按钮 --> <button type = "submit">修改</button> </div> </body> </html> ```
免责声明：
以上内容除特别注明外均来源于网友提问，创作工场回答，未经许可，严谨转载。