<form action="" method="post" id="form1">
时间: 2024-06-02 15:05:01 浏览: 11
<form>是HTML中用于创建用户界面的标记。它可以包含各种表单元素,如输入框、下拉列表、单选框、复选框等,以便用户填写表单数据。而action和method属性是<form>标记中必须要指定的两个属性。其中,action属性指定提交表单数据的目标URL地址,而method属性则指定提交表单数据时所使用的HTTP方法,通常为"GET"或"POST"。如果不指定method属性,默认为"GET"方法。
至于id属性,它是为了方便JavaScript等脚本语言操作DOM而添加的属性,每个id属性值必须是唯一的,用于在页面中标识该元素。
相关问题
<!DOCTYPE html> <html> <head> <title>Login</title> </head> <body> <h1>Login</h1> <form action="/login" method="post"> <label for="username">Username:</label> <input type="text" id="username" name="username"><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password"><br><br> <input type="submit" value="Submit"> </form> </body> </html> 增加取消按钮
要在上述代码中添加一个取消按钮,可以在 `<form>` 标签的后面插入一个 `<input>` 标签。以下是修改后的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
</head>
<body>
<h1>Login</h1>
<form action="/login" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
<input type="button" value="Cancel" onclick="window.location.href='/cancel'">
</form>
</body>
</html>
```
在上述代码中,我们添加了一个 `<input>` 标签,类型为 "button",值为 "Cancel"。同时,我们为该按钮添加了一个 `onclick` 事件,当点击该按钮时,会跳转到 "/cancel" 页面。你可以根据需要修改跳转页面的 URL。
<form style="display:inline-block;" method="post" action="#"> <button class="information-btn" type="submit" id="all-btn">全部员工</button> </form> <form style="display:inline-block;" method="post" action="#"> <button class="information-btn" type="submit" id="new-btn">添加员工</button> </form> <form style="display:inline-block;" method="post" action="#" style="float: right;"> <button class="information-btn1" type="submit" id="chaxun-btn">查询</button> <input type="text" id="chaxun-text" name="chaxuntext" placeholder="请输入要查询的员工信息" value=""> </form>将对三个form放在同一行的右边
可以使用CSS中的浮动(float)属性,将三个form标签放在同一行,同时使用text-align属性将其右对齐。
例如:
```html
<div style="text-align: right;">
<form style="display:inline-block; float:left;" method="post" action="#">
<button class="information-btn" type="submit" id="all-btn">全部员工</button>
</form>
<form style="display:inline-block; float:left;" method="post" action="#">
<button class="information-btn" type="submit" id="new-btn">添加员工</button>
</form>
<form style="display:inline-block; float:left;" method="post" action="#">
<button class="information-btn1" type="submit" id="chaxun-btn">查询</button>
<input type="text" id="chaxun-text" name="chaxuntext" placeholder="请输入要查询的员工信息" value="">
</form>
</div>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<form action="/login" method="post"> <input type="text" name="username" id="username" required> <label for="username">用户名</label> <input type="password" name="password" id="password" required> <label for="password">密码</label> <button type="submit" id="login-btn">登录</button> </form> 注册 优化代码,让form表单里的button和注册按钮样式一样
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
請你幫我美化重新佈局這段代碼<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>异常记录</title> <style> </style> </head> <body> 首页 登记数据 查询数据 异常记录登记 <form method="post" action="/submit"> <label>确认线别:</label> <input type="text" name="line"> <label>确认日期:</label> <input type="date" name="date"> <label>异常机种:</label> <input type="text" name="model"> <label>异常现象:</label> <input type="text" name="prod_line"> <label>生产日期:</label> <input type="date" name="prod_date"> <label>生产班别:</label> <input type="text" name="shift"> <label>生产线别:</label> <input type="text" name="prod_line"> <label>责任人:</label> <input type="text" name="responsible"> <input type="submit" value="提交"> </form> </body> </html>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)