如何创建：注册表单
- Kannu girmi: kaiwaiya Kannu girmi: jahalci fomi
- Kannu girmi: kaiwaiya Kannu girmi: jahalci fomi
学习如何使用 CSS 创建响应式注册表单。
单击按钮可打开注册表单：
×
如何创建注册表单
Rufin 1 - Kama HTML:
A gina shafarfin <form> don auri kwayar da ake gudanarwa. Za su iya samun bayanai da suka kewaye da PHP sabonin ayyukan PHP na'urin.
sauye kada gaba ba'ani kuma kawo shafarfin da zai kula da kowane gaba (da kuma kawo shafarfin da zai kula da kowane gaba):
Koyarwa houa za a kafa shafarfin samun rarraba (modal) kamar:
Rufin 1 - Kama HTML:
A gina shafarfin <form> don auri kwayar da ake gudanarwa. Za su iya samun bayanai da suka kewaye da PHP sabonin ayyukan PHP na'urin.
sauye kada gaba ba'ani kuma kawo shafarfin da zai kula da kowane gaba (da kuma kawo shafarfin da zai kula da kowane gaba):
<!-- Button to open the modal -->
<button onclick="document.getElementById('id01').style.display='block'">Sign Up</button>
<!-- The Modal (contains the Sign Up form) -->
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">times;</span>
<form class="modal-content" action="/action_page.php">
<div class="container">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Rannar Gudan
</label>
<p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>
<div class="clearfix">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Rannar Dukar</button>
<button type="submit" class="signup">Sign Up</button>
</div>
</div>
</form>
</div>
第二步 - 添加 CSS：
* {box-sizing: border-box}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
/* Add background color when input box gets focus */
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Set styles for all buttons */
button {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
button:hover {
opacity:1;
}
/* Set additional styles for cancel button */
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}
/* Make cancel and register buttons float and set equal width */
.cancelbtn, .signupbtn {
float: left;
width: 50%;
}
/* Add padding to container elements */
.container {
padding: 16px;
}
/* Modala (bakki) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: #474e5d;
padding-top: 50px;
}
/* 模态内容/框 */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 距顶部 5%，距底部 15%，并且居中 */
border: 1px solid #888;
width: 80%; /* 可能更多或更少，具体取决于屏幕尺寸 */
}
/* 设置水平线的样式 */
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* 关闭按钮 (x) */
.close {
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: #f1f1f1;
}
.close:hover,
.close:focus {
color: #f44336;
cursor: pointer;
}
/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}
/* 更改超小屏幕上取消按钮和注册按钮的样式 */
@media screen and (max-width: 300px) {
.cancelbtn, .signupbtn {
width: 100%;
}
}
提示：您还可以使用以下 JavaScript 代码，通过点击模态框内容之外的区域来关闭模态框（而不仅仅是通过使用 "×" 或 "cancel" 按钮来关闭它）：
<script>
// 获取模态
var modal = document.getElementById('id01');
// 当用户单击模式之外的任何位置时，将其关闭
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
Kannu girmi: bayanin
Kannu girmi: bayanin:Kannu girmi: HTML fomi
Kannu girmi: bayanin:Kannu girmi: CSS fomi
- Kannu girmi: kaiwaiya Kannu girmi: jahalci fomi
- Kannu girmi: kaiwaiya Kannu girmi: jahalci fomi
