Как установить кнопку сброса на следующей строке?

-1

Я разработал регистрацию от. Я хочу кнопку сброса места перед отправкой на ту же строку. Я попытался разместить тег 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>

источник

2016-11-28 chaitanya anpat

Вы можете попробовать "Дисплей: встроенный блок;", но удалить
тег. Это создает разрыв строки. –

Вот рабочая версия кода - также исправлено несколько HTML ошибки, как отсутствующего </select> и checked -Value, что была нарушена.

.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>

источник

2016-11-28 17:22:05 junkfoodjunkie

благодарит много брата;) –

Как установить кнопку сброса на следующей строке?

ответ

Смежные вопросы