<input type="text" id="username" name="username">什么意思
时间: 2023-07-19 17:52:04 浏览: 42
这是一个HTML表单中的输入框元素,通过`<input>`标签来定义。其中`type`属性设置为`text`表示这是一个文本输入框。`id`属性和`name`属性分别用于标识该输入框的唯一标识符和表单提交时的参数名。在此例中,输入框的唯一标识符为`username`,表单提交时参数名也为`username`。用户在该输入框内输入的文本将会被提交到后台服务器进行处理。
相关问题
<!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> <label for="number">编号:</label> <input type="text" id="number" name="number" required> <label for="username">姓名:</label> <input type="text" id="username" name="username" required> <button type="button">login</button> </form> 让表单在右侧居中
可以使用 flex 布局来实现表单在右侧居中,具体操作如下:
HTML 代码:
```
<div class="container">
<form>
<label for="number">编号:</label>
<input type="text" id="number" name="number" required>
<label for="username">姓名:</label>
<input type="text" id="username" name="username" required>
<button type="button">login</button>
</form>
</div>
```
CSS 代码:
```
.container {
display: flex;
justify-content: flex-end; /* 将表单放在右侧 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 设置容器高度为视口高度 */
}
form {
display: flex;
flex-direction: column; /* 将表单元素纵向排列 */
align-items: flex-end; /* 将表单元素放在容器右侧 */
width: 300px; /* 设置表单宽度 */
}
```
效果如下:
![表单在右侧居中效果图](https://img-blog.csdnimg.cn/20210927162206271.png)
相关推荐
![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)
美化界面<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册</title> </head> <body> 注册 <form action="/Register" method="post"> <label for="username">用户名:</label> <input type="text" name="username" id="username" required>
<label for="password">密码:</label> <input type="password" name="password" id="password" required>
<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)
<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)
![](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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)