我应该如何将重置按钮放在下一行上



我已经设计了注册。我想要放置重置按钮,然后再提交同一行。我试图使用BR标签放置,但标签没有起作用。还建议一些链接正确验证形式。谢谢

这是我的

<!doctype html>
<html>
<head>
<style>
.inputfields{
width:100%;
padding:12px 12px;
margin:8px 0;
display:inline-block;
border:none;
border-bottom:1px solid  red;
border-radius:8px;
box-sizing:border-box;
outline:none;
font-size:105%;
}
.inputradio{
margin:0 0 0 10px;
}
.inputfields:focus {
border: 3px solid gray;
}
input[type=submit]{
width:50%;
background-color: #4CAF50;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
margin:9px 0 0 200px;
padding:15px 20px;
}
input[type=reset]{
width:20%;
background-color: #4CAF50;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
margin:;
padding:15px 20px;
}
input[type=submit]:hover{
background-color: #45a049;
}
#d01{
background-color:#E0EEEE   ;
padding:20px;
border:2px solid #9BDDFF;
border-radius:5px;
width:35%;
float:center;
margin-left:150px;
}
#selectbox{
color:white;
background-color:#b20000;
height:30px;
width:90px;
padding:5px;
font-size:15px;
margin-left:0px;
margin-right:40px;
}
</style>
</head>

<body> 
<h3 style="margin-left:250px">Using CSS to Style HTML Forms</h3>
<div id="d01">
<form action="CSSForms.html">
<label>FirstName</label>
<input type="text" class="inputfields" name="firstname">
<label>LastName</label>
<input type="text" class="inputfields" name="lastname">
<br>
<label>Select gender:</label>
<input type="radio" class="inputradio" name="gender" value="male" checked checked">Male
<input type="radio" class="inputradio" name="gender" value="female">Female<br>
<label>Email-Id</label>
<input type="email" class="inputfields" name="lastname">
<label>Contact Number</label>
<input type="number" class="inputfields" name="lastname">
<label>Date of Birth</label>
<input type="Date" class="inputfields" name="lastname">
<label>Address</label>
<input type="text" class="inputfields" name="lastname">
<label style="margin:20px"> Select Your Country : </label> 
    <select name="country"id="selectbox">
    <option value="india"> India</option>
    <option value="Japan">Japan</option>
    <option value="Switzerland">Switzerland</option>
    <option value="France">France</option>
<input type="reset" value="Reset All" style="margin-left:10px">
<input type="submit" value="Register">
</form>
</div>
</body>
</html>

这是您的代码的工作版本 - 还修复了几个html错误,例如丢失的 </select>和一个损坏的 checked-值。

.inputfields{
width:100%;
padding:12px 12px;
margin:8px 0;
display:inline-block;
border:none;
border-bottom:1px solid  red;
border-radius:8px;
box-sizing:border-box;
outline:none;
font-size:105%;
}
.inputradio{
margin:0 0 0 10px;
}
.inputfields:focus {
border: 3px solid gray;
}
input[type=submit]{
width:50%;
background-color: #4CAF50;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
padding:15px 20px;
}
input[type=reset]{
width: auto;
background-color: #4CAF50;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
padding:15px 20px;
}
input[type=submit]:hover{
background-color: #45a049;
}
#d01{
background-color:#E0EEEE   ;
padding:20px;
border:2px solid #9BDDFF;
border-radius:5px;
width:35%;
float:center;
margin-left:150px;
}
#selectbox{
color:white;
background-color:#b20000;
height:30px;
width:90px;
padding:5px;
font-size:15px;
margin-left:0px;
margin-right:40px;
}
<!doctype html>
<html>
<body> 
<h3 style="margin-left:250px">Using CSS to Style HTML Forms</h3>
<div id="d01">
<form action="CSSForms.html">
<label>FirstName</label>
<input type="text" class="inputfields" name="firstname">
<label>LastName</label>
<input type="text" class="inputfields" name="lastname">
<br>
<label>Select gender:</label>
<input type="radio" class="inputradio" name="gender" value="male" checked>Male
<input type="radio" class="inputradio" name="gender" value="female">Female<br>
<label>Email-Id</label>
<input type="email" class="inputfields" name="lastname">
<label>Contact Number</label>
<input type="number" class="inputfields" name="lastname">
<label>Date of Birth</label>
<input type="Date" class="inputfields" name="lastname">
<label>Address</label>
<input type="text" class="inputfields" name="lastname">
<label style="margin:20px"> Select Your Country : </label> 
    <select name="country"id="selectbox">
    <option value="india"> India</option>
    <option value="Japan">Japan</option>
    <option value="Switzerland">Switzerland</option>
    <option value="France">France</option></select>
<br><input type="reset" value="Reset All" style="margin-left:10px">
<input type="submit" value="Register">
</form>
</div>
</body>
</html>

最新更新