We Keep Coding

How can I display form data in a table on the same page

I'm a beginner to Javascript and CSS.
I'm creating a web app that gets the user data, for example, the name of the person, etc. So, I want the form to close when its submit button is pressed and then I want it to create a table of the submitter's info.
submitter's info never ends, so it should have the capability to store many data.
I used this login form to get an idea;
https://www.w3schools.com/howto/howto_css_login_form.asp
The code is below;
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
function all() {
let name = document.getElementById("output").value;
var finalName = document.createElement("PARAGRAPH")
name.innerHTML(name)
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Full-width input fields */
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* The Modal (background) */
.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: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto;
/* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%;
/* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
#keyframes animatezoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
<h2>Modal Login Form</h2>
<h3 class="output"></h3>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>
<div id="id01" class="modal">
<form class="modal-content animate" action="sub2.html" method="POST">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="img_avatar2.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Student Name</b></label>
<input type="text" id="name" placeholder="Enter Username" name="uname">
<label for="psw"><b>Class</b></label>
<input type="text" placeholder="Enter Password" name="psw">
<label for="psw"><b>Class Number</b></label>
<input type="text" placeholder="Enter Password" name="psw">
<div class="marks">
<label for="psw"><b>First Term Marks</b></label>
<input type="text" placeholder="Maths" name="psw">
<input type="text" placeholder="Science" name="psw">
<input type="text" placeholder="Civics" name="psw">
<input type="text" placeholder="Geography" name="psw">
<input type="text" placeholder="Religion" name="psw">
<input type="text" placeholder="Aesthetics" name="psw">
<input type="text" placeholder="Health Science" name="psw">
<input type="text" placeholder="English" name="psw">
<input type="text" placeholder="English Grammer" name="psw">
<input type="text" placeholder="P.T.S" name="psw">
<input type="text" placeholder="Computer Science" name="psw">
<input type="text" placeholder="Biology" name="psw">
<input type="text" placeholder="Chemistry" name="psw">
<input type="text" placeholder="Physics" name="psw">
<input type="text" placeholder="Combined Maths" name="psw">
<input type="text" placeholder="Commerce" name="psw">
<input type="text" placeholder="Arts" name="psw">
<label for="psw"><b>Second Term Marks</b></label>
<input type="text" placeholder="Maths" name="psw">
<input type="text" placeholder="Science" name="psw">
<input type="text" placeholder="Civics" name="psw">
<input type="text" placeholder="Geography" name="psw">
<input type="text" placeholder="Religion" name="psw">
<input type="text" placeholder="Aesthetics" name="psw">
<input type="text" placeholder="Health Science" name="psw">
<input type="text" placeholder="English" name="psw">
<input type="text" placeholder="English Grammer" name="psw">
<input type="text" placeholder="P.T.S" name="psw">
<input type="text" placeholder="Computer Science" name="psw">
<input type="text" placeholder="Biology" name="psw">
<input type="text" placeholder="Chemistry" name="psw">
<input type="text" placeholder="Physics" name="psw">
<input type="text" placeholder="Combined Maths" name="psw">
<input type="text" placeholder="Commerce" name="psw">
<input type="text" placeholder="Arts" name="psw">
<label for="psw"><b>Third Term Marks</b></label>
<input type="text" placeholder="Maths" name="psw">
<input type="text" placeholder="Science" name="psw">
<input type="text" placeholder="Civics" name="psw">
<input type="text" placeholder="Geography" name="psw">
<input type="text" placeholder="Religion" name="psw">
<input type="text" placeholder="Aesthetics" name="psw">
<input type="text" placeholder="Health Science" name="psw">
<input type="text" placeholder="English" name="psw">
<input type="text" placeholder="English Grammer" name="psw">
<input type="text" placeholder="P.T.S" name="psw">
<input type="text" placeholder="Computer Science" name="psw">
<input type="text" placeholder="Biology" name="psw">
<input type="text" placeholder="Chemistry" name="psw">
<input type="text" placeholder="Physics" name="psw">
<input type="text" placeholder="Combined Maths" name="psw">
<input type="text" placeholder="Commerce" name="psw">
<input type="text" placeholder="Arts" name="psw">
</div>
<button type="submit" onclick="all()">Done!</button>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</form>
</div>

The problem is you are using the submit button. After clicking on it, the data is being sent and the page is immediately reloaded and all filled data is deleted. The all() function is not executed at all. You need to submit the form via an ajax request so that the page is not refreshed. Here is the article about it https://www.w3schools.com/xml/ajax_intro.asp .
But it's much more convenient to send ajax requests using jQuery library (https://jquery.com).
So you can connect this library: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>. There is how use ajax by jQuery: https://www.w3schools.com/jquery/ajax_ajax.asp
If you have difficulties, i can detale write your code, just ask me.

How to hide input value on input click with js?

I am trying to hide the input value of each individual input when clicked
My javascript is working fine but only targets the individual ID listed. I am looking for a more refined method that selects only the clicked input without having to repeat that same block of code 5 times targeting each different ID
$(document).ready(function() {
var text = document.getElementById('first_name');
var button = document.getElementById('first_name');
button.onclick = function() {
text.value = '';
text.classList.add("lowercase");
}
});
input[type=text] {
display: block;
border: none;
border-bottom: 1px solid;
width: 100%;
padding: 2rem 0 1rem;
}
input, input[type=submit] {
font-family: 'usm', sans-serif;
font-size: 0.7rem;
letter-spacing: 1pt;
text-transform: uppercase;
color: #7A7A7A;
}
input.lowercase {
text-transform: none !important;
letter-spacing: 0 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form method="post" action="">
<input type="text" name="first_name" id="first_name" value="First Name*">
<br>
<input type="text" name="last_name" id="last_name" value="Last Name*">
<br>
<input type="text" name="email" id="email" value="Email Address*">
<br>
<input type="text" name="phone" id="phone" value="Phone Number">
<br>
<input type="text" name="message" id="message" value="Message*">
<div class="submit" >
<input type="submit" name="submit" value="Send" id="submit">
</div><!-- End of Submit -->
</form>
</body>

You can use jquery selector and use $(this)
$(document).ready(function() {
$('input[type="text"]').on('click', function(e) {
$(this).val('');
$(this).addClass('lowercase')
})
});
input[type=text] {
display: block;
border: none;
border-bottom: 1px solid;
width: 100%;
padding: 2rem 0 1rem;
}
input,
input[type=submit] {
font-family: 'usm', sans-serif;
font-size: 0.7rem;
letter-spacing: 1pt;
text-transform: uppercase;
color: #7A7A7A;
}
input.lowercase {
text-transform: none !important;
letter-spacing: 0 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form method="post" action="">
<input type="text" name="first_name" id="first_name" value="First Name*">
<br>
<input type="text" name="last_name" id="last_name" value="Last Name*">
<br>
<input type="text" name="email" id="email" value="Email Address*">
<br>
<input type="text" name="phone" id="phone" value="Phone Number">
<br>
<input type="text" name="message" id="message" value="Message*">
<div class="submit">
<input type="submit" name="submit" value="Send" id="submit">
</div>
<!-- End of Submit -->
</form>

Maybe you should consider using placeholdr instead.
$(document).ready(function() {
$('form input[type="text"]').on('click', function() {
this.value = '';
});
});
input[type=text] {
display: block;
border: none;
border-bottom: 1px solid;
width: 100%;
padding: 2rem 0 1rem;
}
input, input[type=submit] {
font-family: 'usm', sans-serif;
font-size: 0.7rem;
letter-spacing: 1pt;
text-transform: uppercase;
color: #7A7A7A;
}
input.lowercase {
text-transform: none !important;
letter-spacing: 0 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<input type="text" name="palceholder_example" id="placeholdr_example" placeholder="Place holder example">
<form method="post" action="">
<input type="text" name="first_name" id="first_name" value="First Name*">
<br>
<input type="text" name="last_name" id="last_name" value="Last Name*">
<br>
<input type="text" name="email" id="email" value="Email Address*">
<br>
<input type="text" name="phone" id="phone" value="Phone Number">
<br>
<input type="text" name="message" id="message" value="Message*">
<div class="submit" >
<input type="submit" name="submit" value="Send" id="submit">
</div><!-- End of Submit -->
</form>
</body>

Define one function with input parameter as id and call this fn in an individual input element by passing that element's id.
function clearText(id) {
var text =
document.getElementById(id);
var button =
document.getElementById(id);
button.onclick = function() {
text.value = '';
text.classList.add("lowercase");
}

validate form with javascript with a validation expression

So I have a form and I am trying to validate it to make sure no other characters are submitted I know theirs a validation expression but I do not know how to apply it.I just want it where if the user puts any invalid character that may interfere then it just return false. I tried but it does not seem to work, also please help me make my code more efficient if there is any way thank you
function validateForm() {
var name = document.forms["theForm"]["fname"].value;
var lastName = document.forms["theForm"]["lname"].value;
var email = document.forms["theForm"]["femail"].value;
var subject = document.forms["theForm"]["subject"].value;
if (name == "") {
window.alert("Missing First Name.");
name.focus();
return false;
}
if (lastName == "") {
alert("Missing Last Name");
return false;
}
if (email == "") {
alert("Missing Email");
return false;
}
if (subject == "") {
alert("Incomplete Action");
return false;
}
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #993b3b;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #B0B0B0;
}
.formCont {
text-align: left;
margin: 152.5px 0;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<script>
</script>
</head>
<body>
<div class="formCont">
<form name="theForm" onsubmit="return validateForm()" method="post">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="femail">Email</label>
<input type="text" id="femail" name="Email" placeholder="Your email.."
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>

Ok, so since this is a college project. I'm assuming you have to write vanilla JS (if not jQuery is a super better alternative).
A couple of things to start off:
name === ""
Is better than name == "" Because of JavaScript's type coercion.
Also, HTML now has an email input type. So
<input type="email" id="femail" name="Email" placeholder="Your email..">
Why do you have window.alert in one place and alert in other places. Oh goodness. This is becoming a code review :).
Anyway, like I said before, if jQuery is a choice, please, please do.

#peterb mentioned correctly here is an example of using jquery
function validateForm() {
var name = $("#fname").val();
var lastName = $("#lname").val();
var email = $("#femail").val();
var subject =$("#subject").val();
if (name == "" || name ==null || name==undefined) {
alert("Missing First Name.");
markerror("#fname")
return false;
}
if (lastName == "" || lastName ==null || lastName==undefined) {
alert("Missing Last Name");
markerror("#lname")
return false;
}
if (email == "" || email ==null || email==undefined) {
alert("Missing Email");
markerror("#femail")
return false;
}
if (subject == "" || subject ==null || subject==undefined) {
alert("Incomplete Action");
markerror("#subject")
return false;
}
}
function markerror(index){
$(index).css("border", "1px solid red");
$(index).focus();
setTimeout(function () {
$(index).css("border", "1px solid #ccc");
}, 4000);
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #993b3b;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #B0B0B0;
}
.formCont {
text-align: left;
margin: 152.5px 0;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="theForm" onsubmit="return validateForm()" method="post">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="femail">Email</label>
<input type="text" id="femail" name="Email" placeholder="Your email.."
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>

Login validation function

I have been trying to get this to work for a while now. I cannot connect the login function to the form.
I have tried onsubmit on both the form tag and the button input tag, i have tried onclick but it does not get the code from js function.
index1.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Google maps</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!--<link rel="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="util.js"></script>
<script src="JavaScript.js"></script>
<script type="text/javascript"></script>
<style>
#container {
width: 1200px;
}
#map {
width: 80%;
min-height: 600px;
/*float: right;*/
margin-top: 15px;
margin-left: auto;
margin-right: auto;
}
#img {
width: 150px;
height: 150px;
float: left;
margin-top: auto;
}
/*sökruta*/
#searchBox {
background-color: #ffffff;
padding: 5px;
font-family: 'Roboto','sans-serif';
margin-bottom: 10px;
float: top;
}
/*
html, body {
height: 100%;
margin: 0;
padding: 0;
}
*/
.search-form .form-group {
float: right !important;
transition: all 0.35s, border-radius 0s;
width: 32px;
height: 32px;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
border-radius: 25px;
border: 1px solid #ccc;
}
.search-form .form-group input.form-control {
padding-right: 20px;
border: 0 none;
background: transparent;
box-shadow: none;
display:block;
}
.search-form .form-group input.form-control::-webkit-input-placeholder {
display: none;
}
.search-form .form-group input.form-control:-moz-placeholder {
/* Firefox 18- */
display: none;
}
.search-form .form-group input.form-control::-moz-placeholder {
/* Firefox 19+ */
display: none;
}
.search-form .form-group input.form-control:-ms-input-placeholder {
display: none;
}
.search-form .form-group:hover,
.search-form .form-group.hover {
width: 100%;
border-radius: 4px 25px 25px 4px;
}
.search-form .form-group span.form-control-feedback {
position: absolute;
top: -1px;
right: -2px;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
color: #3596e0;
left: initial;
font-size: 14px;
}
.form-group {
max-width: 300px;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body id="container">
<img id="img" src="http://www2.math.su.se/icsim/images/sterik.jpg" alt="Stockholm"/>
<div class="row">
<br>
<div class="col-md-4 col-md-offset-3">
<form action="" class="search-form">
<div class="form-group has-feedback">
<label id="Search" class="sr-only">Search</label>
<input type="text" class="form-control" name="search" id="searchField" placeholder="Sök">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</form>
</div>
<div class="form-group">
<form id="loginForm" name="loginForm" method="POST">
<label for="user">Användarnamn: </label>
<br>
<input class="form-control" type="text" id="user" name="user" required>
<br>
<label for="password">Lösenord: </label>
<br>
<input class="form-control" type="password" id="password" name="passwords" required>
<br>
<br>
<input class="form-control" type="submit" id="login" value="Logga in" onclick="login()">
</form>
</div>
<div id="map">
</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNPkC40KP9lMKHUsJW7q403qnwRqYkTno&callback=initMap">
</script>
</div>
</body>
JavaScript.js
function login() {
//spara username och password i två varibler med samma namn från formet.
var username = document.getElementById("user").value;
var password = document.getElementById("password").value;
if(username === "admin"
&& password === "123" )
{
alert( "validation succeeded" );
location.href="adminView.php";
}
else
{
alert( "validation failed" );
location.href="index1.html";
}
}

I have created working JSFiddle - Please Check : https://jsfiddle.net/5w6fg52m/1/
Below Code working fine :
<script>
//just change function name as it's conflict with button id
function login1() {
//spara username och password i två varibler med samma namn från formet.
var username = document.getElementById("user").value;
var password = document.getElementById("password").value;
if(username === "admin"
&& password === "123" )
{
alert( "validation succeeded" );
location.href="adminView.php";
}
else
{
alert( "validation failed" );
location.href="index1.html";
}
return false;
}
</script>
//HTML
<div class="form-group">
<form id="loginForm" name="loginForm" method="POST">
<label for="user">Användarnamn: </label>
<br>
<input class="form-control" type="text" id="user" name="user" required>
<br>
<label for="password">Lösenord: </label>
<br>
<input class="form-control" type="password" id="password" name="passwords" required>
<br>
<br>
<input class="form-control" type="button" id="login" value="Logga in" onclick="return login1();">
</form>
</div>
-> I have created other version of JSFiddle, so you come to know conflict issue easily: https://jsfiddle.net/5w6fg52m/2/
Here i have keep function name same(login) and change ID of submit button.

You can set the submit event directly to your like
document.getElementById("loginForm").onsubmit = function() { ... };
Bellow a sample snippet :
window.onload = function(){
document.getElementById("loginForm").onsubmit = function() {
//spara username och password i två varibler med samma namn från formet.
var username = document.getElementById("user").value;
var password = document.getElementById("password").value;
if (username === "admin" &&
password === "123") {
alert("validation succeeded");
//location.href = "adminView.php";
} else {
alert("validation failed");
//location.href = "index1.html";
}
// to prevent submit
return false;
}
}
<div class="form-group">
<form id="loginForm" name="loginForm" method="POST">
<label for="user">Användarnamn: </label>
<br>
<input class="form-control" type="text" id="user" name="user" required>
<br>
<label for="password">Lösenord: </label>
<br>
<input class="form-control" type="password" id="password" name="passwords" required>
<br>
<br>
<input class="form-control" type="submit" id="login" value="Logga in">
</form>
</div>

This happens when you declare variable or function with the same name as declare before. just rename login function or rename id="login".

2 Divs next to each other with little spacing in between

I am trying to create 2 divs that are next to each other but have a little space in between them. This is the following code that i have and the spacing is to far apart. I can't figure out how to set the spacing:
<style type="text/css">
.formLayout
{
background-color: #f3f3f3;
border: solid 1px #a1a1a1;
padding: 10px;
width: 300px;
border-radius: 1em;
}
.formLayout label, .formLayout input
{
display: block;
width: 120px;
float: left;
margin-bottom: 10px;
}
.formLayout label
{
text-align: right;
padding-right: 20px;
}
br
{
clear: left;
}
.box_header {
font-weight: 600;
color: #000000;
text-align: center;
border-radius: 1em;
}
</style>
<div class="formLayout" style="float:left;">
<div class="box_header">
Account Manager Information
</div>
<label>First Name</label>
<input id="fname" name="fname"><br>
<label>Last Name</label>
<input id="lname" name="lname"><br>
<label>Address</label>
<input id="address1"><br>
<label></label>
<input id="address2"><br>
<label>City</label>
<input id="address2"><br>
<label>State</label>
<input id="zip"><br>
<label>Zip</label>
<input id="zip"><br>
</div>
</div>
<div class="formLayout" style="float:right;">
<div class="box_header">
Client Information
</div>
<label>First Name</label>
<input id="fname" name="fname"><br>
<label>Last Name</label>
<input id="lname" name="lname"><br>
<label>Address</label>
<input id="address1"><br>
<label></label>
<input id="address2"><br>
<label>City</label>
<input id="address2"><br>
<label>State</label>
<input id="zip"><br>
<label>Zip</label>
<input id="zip"><br>
</div>

On your second formLayout, you can do:
style='float:left; margin-left: 20px' instead of floating right: http://jsfiddle.net/33Tma/
Obviously you can change the margin to whatever you need.
Also, you should try to avoid inline styling as much as possible.