How to remove hover from Submit and Reset Button - html

What command do i need to use to don't make it zoom when i click "submit" or "reset" button. I want them just to look normal. i am supposed to use hover for this program but not for the last 2 buttons
Please see code below of what i have so far. anything is appreciated
<!DOCTYPE html>
<html>
<head>
<title>CSS rules</title>
<style>
input:focus{
background-color: yellow;
height: 40px;
width: 280px;
color: blue;
font-size: 24px;
}
input:hover{
background-color: cyan;
height: 40px;
width: 280px;
color: red;
font-size: 24px;
}
</style>
</head>
<body>
<form action="">
<table>
<tr>
<td>Last Name:</td>
<td>
<input type="text" id="LastName" />
</td>
</tr>
<tr>
<td>First Name:</td>
<td>
<input type="text" id="FirstName"/>
</td>
</tr>
<tr>
<td>E-mail Address :</td>
<td>
<input type="password" id="Email"/>
</td>
</tr>
<tr>
<td>
<input type="submit"/>
</td>
<td>
<input type="reset"/>
</td>
</tr>
</table>
</form>
</body>
<!--body tag ends here-->
</html>
<!--html tag ends here-->
Tried playing with the code but i can't figure it out


<!DOCTYPE html>
<html>
<head>
<title>CSS rules</title>
<style>
input[type="text"]:hover, input[type="password"]:hover {
background-color: yellow;
height: 40px;
width: 280px;
color: blue;
font-size: 24px;
}
input[type="text"]:focus, input[type="password"]:focus {
background-color: cyan;
height: 40px;
width: 280px;
color: red;
font-size: 24px;
}
</style>
</head>
<body>
<form action="">
<table>
<tr>
<td>Last Name:</td>
<td>
<input type="text" id="LastName" />
</td>
</tr>
<tr>
<td>First Name:</td>
<td>
<input type="text" id="FirstName"/>
</td>
</tr>
<tr>
<td>E-mail Address :</td>
<td>
<input type="password" id="Email"/>
</td>
</tr>
<tr>
<td>
<input type="submit"/>
</td>
<td>
<input type="reset"/>
</td>
</tr>
</table>
</form>
</body>
<!--body tag ends here-->
</html>
<!--html tag ends here-->
Changed the way you call the style. By passing in the [type=text] in CSS, you make sure that only type=text and type=password pick up the styles, and making the submit and the reset button not pick up the styles.


You'll need to add default style for when it's not hovering or in focus. Try adding this to your the area between your style tags:
input {
background-color: black;
height: 40px;
width: 280px;
color: white;
font-size: 24px;
}
If that's not what you intended, Yash Digant Joshi may have a better answer.


Add hover effect on input which is not submit or reset.
:where(input:not([type="submit"]):not([type="reset"])):hover

Related

Need to center a table within a fieldset within a form

I had a quick HTML/CSS question I hope someone could help me with!
I am trying to learn the specifics of CSS in an online course. I am trying to do a very specific alignment with CSS within a form within a fieldset within a table. I need to have a fieldset split down the middle, and have the label directly on the left, and the input of the form directly on the right. I uploaded 2 pictures: what I have so far and what I am hoping to get, to give a visualization of what I am trying to achieve.
For anyone versed in CSS I am sure this is very easy but it's confusing me. Was just hoping to get some direction!
What I have:
http://imgur.com/gKoWux7
What I want to get:
http://imgur.com/IfeK8D1
Ignore the repetitive code/names in the first image, I am just worried about the alignment of the labels, inputs and buttons.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test 2</title>
<link rel="stylesheet" type="text/css" href="test2.css">
</head>
<body>
<form>
<fieldset>
<legend>Personal Information</legend>
<table>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Registration Information</legend>
<table>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>First Name:</label></td>
<td><input type="text"></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Submit Your Registration</legend>
<table>
<tr>
<td><input type="submit"></td>
<td><input type="reset"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
Here is my CSS:
body {
background-color: #A8F89C;
margin: auto;
width: 50%;
}
table {
width: 400px;
table-layout: fixed;
}
fieldset {
width: 410px;
margin: auto;
width: 50%;
}
legend {
font-size: 16px;
font-weight: bold;
}
label {
font-size: 14px;
color: #06127D;
}
td label {
font-weight: bold;
padding-right: 7px;
}
td input {
padding-left: 7px;
}
form input {
width: 140px;
}
label input[type="radio"] {
font-size: 14px;
color: #201E1C;
}
button {
width: 75px;
font-weight: bold;
background-color: rgb(28,67,14);
}
Thank you so much for any help!!!

I just have read your requirement what you want to get.
You can use below mentioned css to get layout like this image
http://imgur.com/IfeK8D1
<style>
fieldset,table{
width:100%
}
td{
width:50%;
}
tbody tr td:first-child{
text-align:right;
padding-right:20px;
}
I hope it will usefull for you as per your need.
Thanks

My idea would add this CSS to (Because label doesn't fill the entire width of the td as label is not a block level element)
td label{
width:100%;
display: inline-block;
text-align:right;
}
or if you prefer you could something like this too, add
td {
text-align: right
}
but it moves all the td elements to right.

Snippet below
Take out the border if needed
body {
background-color: #A8F89C;
margin: auto;
}
table {
table-layout: fixed;
}
fieldset {
width: 410px;
margin: auto;
text-align: center;
}
legend {
font-size: 16px;
font-weight: bold;
}
label {
font-size: 14px;
color: #06127D;
}
td label {
font-weight: bold;
padding-right: 7px;
}
td input {
padding-left: 7px;
}
form input {
width: 140px;
}
label input[type="radio"] {
font-size: 14px;
color: #201E1C;
}
button {
width: 75px;
font-weight: bold;
background-color: rgb(28, 67, 14);
}
table {
border: solid red;
display: inline-table;
}
fieldset {
border: solid blue;
}
td:nth-child(1) {
text-align: right
}
<!DOCTYPE html>
<html>
<head>
<title>Test 2</title>
<link rel="stylesheet" type="text/css" href="test2.css">
</head>
<body>
<form>
<fieldset>
<legend>Personal Information</legend>
<table>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Registration Information</legend>
<table>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<label>First Name:</label>
</td>
<td>
<input type="text">
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Submit Your Registration</legend>
<table>
<tr>
<td>
<input type="submit">
</td>
<td>
<input type="reset">
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>

First of all using div maybe easier to use ..I have modify a bit of your html where i get rid of the tr and td and use div .Hope this help
<div align = "center">
<label>First Name:</label>
<input type="text">
</div>

regarding responsive and non responsive web pages

I have created two web pages, to see the differences between responsive and non responsive web pages.
I have given width and margin value in css files.
Both pages take its responsive behavior by itself.
This is my css file:
#CHARSET "ISO-8859-1";
body {
background-color: #999999;
}
.signUp {
background-color: #2F4F4F;
margin: 40px auto;
border-radius: 5px;
max-width: 1000px;
box-shadow: 0px 0px 200px 0px #2F4F4F;
}
.rowLab {
font-size: 20px;
padding: 0px 60px 0px 0px;
}
.in {
width: 400px;
position: relative;
background-color: #2F4F4F;
padding: 5px 10px 5px 5px;
font-size: 25px;
}
.btn {
background-color: gray;
color: #2F4F4F;
padding: 10px 40px 10px 40px;
}
What should I do in this so that it should not show the responsive behavior.
i.e. I want the pages not to shrink when I reduce the screen size.
This my html page:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>SignUp</title>
<link rel="stylesheet" href="webStyle.css">
<script type="text/javascript">
function contact() {
var a=document.getElementById("phone").value;
if(a.length!=10){
alert("Check Contact Number !!");
}
}
</script>
</head>
<body>
<div class="signUp">
<form action="DBinsert" method="get" >
<br><br>
<h1 style="font-size: 50px; color: #ffffff" align="center">Register Yourself</h1>
<br><br><br>
<table align="center">
<tr>
<td class="rowLab">First Name</td>
<td><input class="in" type="text" name="fname" required autocomplete="on"></td>
</tr>
<tr>
<td class="rowLab">Last Name</td>
<td><input class="in" type="text" name="sname" required autocomplete="on"></td>
</tr>
<tr>
<td class="rowLab">Username</td>
<td><input class="in" type="text" name="uname" required autocomplete="on"></td>
</tr>
<tr>
<td class="rowLab">Password</td>
<td><input class="in" type="password" name="pwd" required autocomplete="off"></td>
</tr>
<tr>
<td class="rowLab">Email Id</td>
<td><input class="in" type="text" name="email" required autocomplete="on"></td>
</tr>
<tr>
<td class="rowLab">Phone NO.</td>
<td><input class="in" type="text" name="phone" id="phone" onblur="contact()" required autocomplete="on"></td>
</tr>
<tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr>
<tr><td></td>
<td><input class="btn" type="submit" value="SignUp"></td>
</tr>
<tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr>
<tr><td></td>
<td>
<%String sc=(String)request.getAttribute("data"); %>
<%if(sc!=null) {%>
<b><%= sc %></b>
<%} %><br><br>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

You have to set the width to a fixed value, not a percent. This way the page will stay the same size regardless of window or screen size.
Example: width: 1000px;, width: 1000em; or width: 1000rem; not width: 100%; or width: 100vw;.

Print output in form from out.print() statement in JSP

I am running my program on Apache Server.
As of now I comment the second form to get the output as normal text.
But I want to use the second form as the output table.
I need help in JSP file while using out.print()
How can I pass the output from out.print() to second form?
SWAPPING OF TWO NUMBERS
LAB11.html
<!DOCTYPE html>
<html>
<head>
<title>LAB11</title>
<style type="text/css">
div {
background-color: white;
width: 20%;
text-align: center;
padding: 20px;
margin: auto;
box-shadow: 10px 10px 5px #888888;
border-radius: 15px;
}
input[type=text] {
padding:5px;
border:2px solid #ccc;
-webkit-border-radius: 5px;
border-radius: 5px;
}
input[type=text]:focus {
border-color:#333;
}
input[type=submit] {
padding:5px 15px;
background:#ccc;
border:0 none;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px;
}
</style>
</head>
<body bgcolor="BlanchedAlmond">
<h1 style="text-align: center;font-size: 30px;color:crimson">Swapping of two numbers</h1>
<div>
<form action="LAB11_1.jsp">
<table>
<tr>
<td>First Number:</td>
<td><input type="text" name="n1"></td><br>
</tr>
<tr>
<td>Second Number:</td>
<td><input type="text" name="n2"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Swap"></td>
</tr>
</table>
</form>
</div>
<h1 style="text-align: center;font-size: 30px;color:crimson">After Swapping</h1>
<div>
<form>
<table>
<tr>
<td>First Number:</td>
<td><input type="text" name="n3" id="n3"></td><br>
</tr>
<tr>
<td>Second Number:</td>
<td><input type="text" name="n4" id="n4"></td>
</tr>
</table>
</form>
</div>ss
</body>
</html>
LAB11_1.jsp
<!DOCTYPE html>
<html>
<head>
<title>LAB11_1</title>
</head>
<body>
<%
int a=Integer.parseInt(request.getParameter("n1"));
int b=Integer.parseInt(request.getParameter("n2"));
a=a+b;
b=a-b;
a=a-b;
out.print(a+"<br>");
out.print(b+"<br>");
%>
</body>
</html>

How to align form at the center of the page in html/css

I am new to html/css. i am trying to build up my own form and i am trying to align it in the center. I used the align property in css but its not working.
Html code:
<!DOCTYPE HTML>
<head>
<title>Web Page Having A Form</title>
<link rel = "stylesheet" type="text/css" href="Form.css">
</head>
<body>
<h1>Create a New Account</h1>
<form >
<table>
<tr>
<td>Name :</td> <td><input type="text" name="name"></td><br>
</tr>
<tr>
<td>Email :</td> <td><input type="text" name="email"></td><br>
</tr>
<tr>
<td>Password :</td> <td><input type="password" name="pwd"></td><br>
</tr>
<tr>
<td>Confirm Password :</td> <td><input type="password" name="cpwd"><br>
</tr>
<tr>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
</body>
Css Code:
body
{
background-color : #484848;
}
h1
{
color : #000000;
text-align : center;
font-family: "SIMPSON";
}
form
{
align:"center";
}
How should i change my code to align the entire form in the center?

Like this
demo
css
body {
background-color : #484848;
margin: 0;
padding: 0;
}
h1 {
color : #000000;
text-align : center;
font-family: "SIMPSON";
}
form {
width: 300px;
margin: 0 auto;
}

This is my answer. I'm not a Pro. I hope this answer may help you :3
<div align="center">
<form>
.
.
Your elements
.
.
</form>
</div>

Wrap the <form> element inside a div container and apply css to the div instead which makes things easier.
#aDiv{width: 300px; height: 300px; margin: 0 auto;}
<html>
<head></head>
<body>
<div>
<form>
<div id="aDiv">
<table>
<tr>
<td>Name :</td>
<td>
<input type="text" name="name">
</td>
<br>
</tr>
<tr>
<td>Email :</td>
<td>
<input type="text" name="email">
</td>
<br>
</tr>
<tr>
<td>Password :</td>
<td>
<input type="password" name="pwd">
</td>
<br>
</tr>
<tr>
<td>Confirm Password :</td>
<td>
<input type="password" name="cpwd">
<br>
</tr>
<tr>
<td>
<input type="submit" value="Submit">
</td>
</tr>
</table>
</div>
</form>
</div>
</body>
</html>

I would just use table and not the form. Its done by using margin.
table {
margin: 0 auto;
}
also try using something like
table td {
padding-bottom: 5px;
}
instead of <br />
and also your input should end with />
e.g:
<input type="password" name="cpwd" />

Or you can just use the <center></center> tags.

Wrap the element inside a div container as a row like
your form here or something like that.
Set css attribute:
width: 30%; (or anything you want)
margin: auto;
Please take a look on following picture for more detail.

Html table indent problem

I have this form:
Markup is:
<table style="width: 100%; padding:5px;">
<col style="width: 20%; text-align: left" />
<col style="width: 80%; text-align: left" />
<tr>
<td>
<div>
Наименование</div>
</td>
<td>
<dx:ASPxButtonEdit ID="beWorkTypeName" runat="server" AutoPostBack="False">
<Buttons>
<dx:EditButton>
</dx:EditButton>
</Buttons>
</dx:ASPxButtonEdit>
</td>
</tr>
<tr>
<td>
<div>
Скважина</div>
</td>
<td>
<dx:ASPxButtonEdit ID="beWell" runat="server" AutoPostBack="False">
<Buttons>
<dx:EditButton>
</dx:EditButton>
</Buttons>
</dx:ASPxButtonEdit>
</td>
</tr>
<tr>
<td>
<div>
Дата начала</div>
</td>
<td>
<table>
<tr>
<td>
<dx:ASPxDateEdit ID="deBeginDate" runat="server">
</dx:ASPxDateEdit>
</td>
<td>
<dx:ASPxButton ID="btnDateChange" AutoPostBack="false" Enabled="false" Text="Изменить дату"
runat="server">
</dx:ASPxButton>
</td>
<td>
<dx:ASPxCheckBox ID="cbIsMainWorkType" Enabled="false" runat="server">
</dx:ASPxCheckBox>
</td>
<td>
<div>
Основной вид работ в заявке</div>
</td>
</tr>
</table>
</td>
</tr>
Question is:
How do I get rid of this awful indent of table inside another table?

Try to style your inner table as follows:
.innerTable {
border: 0px;
border-collapse: collapse;
margin: 0px;
padding: 0px;
}
EDIT: You also might need to remove spacing from the table rows and cells:
.innerTable tr {
border: 0px;
margin: 0px;
padding: 0px;
}
.innerTable th {
border: 0px;
margin: 0px;
padding: 0px;
}
.innerTable td {
border: 0px;
margin: 0px;
padding: 0px;
}

Here's an example of how to layout form elements using CSS without using tables - hopefully it'll help? The key is in setting the width on the label elements, which then makes the input controls to their right lineup.
<html>
<head>
<style type="text/css">
label {
float: left;
width: 10em;
margin-right: 1em;
}
.row {
float: left;
clear: left;
padding-bottom: .3em;
}
</style>
</head>
<body>
<form action="example.php">
<div class="row">
<label for="name">Name:</label>
<input id="name" name="name" class="text" type="text" />
</div>
<div class="row">
<label for="email">Email address:</label>
<input id="email" name="email" class="text" type="text" />
</div>
<div class="row">
<label for="phone">Telephone:</label>
<input id="phone" name="phone" class="text" type="text" />
</div>
<div class="row">
<input class="submit" type="submit"
value="Submit" />
</div>
</form>
</body>
</html>