Question

我设计的注册来自。我想在同一行提交前重置按钮。我尝试使用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>

Answer 1

以下是您的代码的工作版本 - 还修复了一些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>

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

1 个答案: