I'm just begin to study HTML for school.
Now I have to build a simple website with a form.
I did it in table-format.
The problem is that I need to show the input of the table on my display after using the submit-button.
I searched over 4 hours but did not find any solution.
Can someone help me with it?
Below my html-code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Salsa</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Salsa Events</h1>
<p>Submit for your newsletter.<br>
</p>
<form action="" method="get">
<center><table border="2">
<tr>
<td>First name</td>
<td><input type="text" name="first name" required></td>
</tr>
<tr>
<td>Family name</td>
<td><input type="text" name="family name" required></td>
</tr>
<tr>
<td>E-mail</td>
<td><input type="email" name="e-mail" required></td>
</tr>
<tr>
<td>Date of birth</td>
<td><input type="date" name="date of birth" required></td>
</tr>
<tr>
<td>Recieve newsletter</td>
<td><input type="checkbox" name="is_checkbox" checked></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Send"> </td>
</tr>
</table></center>
</form>
</body>
</html>
Related
Last 3 cells are going out of table. How to make them come inside the table.
"UG(Date of Joining)" should be just next to first date picker.
Overall there should be 5 cells in that 1 row.
html,body{
background: rgb(211, 212, 218)
}
.table{
background-color: rgb(211, 212, 218);
}
<div class="table">
<table cellpadding="8" border="2" , align="center" style="width: 100%;">
<form>
<tr style="background-color: royalblue;">
<th style="color: white;" colspan="2"> <tt style="font-size: larger;">Acedamic Details</tt></th>
</tr>
<tr>
<th>Student Name</th>
<td>
First Name <label><input type="text"></label>
Middle Name <label><input type="text"></label>
Last Name <label><input type="text"></label>
</td>
</tr>
<tr>
<th>UG (Date of Joining)</th>
<td><input type="date"></td>
<th>UG (Date of Joining)</th>
<td><input type="date"></td>
<td>
<button title="button title" class="action primary tocart" onclick=" window.open('marks.html'); return false;">Upload Marks</button>
</td>
</tr>
</form>
</table>
</div>
To make each row in the table a form, you can use the following structure:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid rgb(218, 218, 223);
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.inputs{
height: 25px;
}
.submitButtons{
height: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<tr>
<td>ID</td>
<td>First Name</td>
<td>Last Name</td>
<td>Start Date</td>
<td>Stop Date</td>
<td>Save</td>
</tr>
<tr>
<td>
<form id="form1"><input type="hidden" name="id" value="1" /></form>
</td>
<td><input class="inputs" form="form1" type="text" name="name" placeholder="Enter First Name" /></td>
<td><input class="inputs" form="form1" type="text" name="description" placeholder="Enter Last Name" /></td>
<td><input class="inputs" form="form1" type="date" value="Save" /></td>
<td><input class="inputs" form="form1" type="date" value="Save" /></td>
<td><input class="submitButtons" form="form1" type="button" value="Save" /></td>
</tr>
<tr>
<td>
<form id="form2"><input type="hidden" name="id" value="2" /></form>
</td>
<td><input class="inputs" form="form2" type="text" name="name" placeholder="Enter First Name" /></td>
<td><input class="inputs" form="form2" type="text" name="description" placeholder="Enter Last Name" /></td>
<td><input class="inputs" form="form2" type="date" value="Save" /></td>
<td><input class="inputs" form="form2" type="date" value="Save" /></td>
<td><input class="submitButtons" form="form2" type="button" value="Save" /></td>
</tr>
</table>
<script>
/* Scripts */
</script>
</body>
</html>
Your table can have maximum two td or th whereas on the last tr you have defined five td & th. What you really should do is on the first tr do colspan=5 instead of doing colspan=2 and on the second tr do one with colspan=2 and another with colspan=3 and leave last tr as it is.
Your code should look like this:
<table border="1px">
<tr>
<td colspan="5">5</td>
</tr>
<tr>
<td colspan="2">2</td>
<td colspan="3">3</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
I want my email, password etc to be the same width as Name and Surname Together but I am struggling to this.
<div id="container">
<table>
<tr>
<td><input type="text" name="emer" placeholder="Emri"></td>
<td><input type="text" name="mbiemer" placeholder="Mbiemri"></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="email" placeholder="Emaili"></td>
</tr>
<tr>
<td colspan="2"><input type="password" name="email" placeholder="Password-i"></td>
</tr>
<tr>
<td colspan="2"><input type="password" name="email" placeholder="Rivendos Password-in"></td>
</tr>
</table>
</div>
Like this?
The input elements width needs to be set to 100% to take the width of the container!
td > input{
width:100%;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="container">
<table>
<tr>
<td><input type="text" name="emer" placeholder="Emri"></td>
<td><input type="text" name="mbiemer" placeholder="Mbiemri"></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="email" placeholder="Emaili"></td>
</tr>
<tr>
<td colspan="2"><input type="password" name="email" placeholder="Password-i"></td>
</tr>
<tr>
<td colspan="2"><input type="password" name="email" placeholder="Rivendos Password-in"></td>
</tr>
</table>
</div>
</body>
</html>
i am working on a spring web application. i tried to write a function that checks whether if the entered password is correct.
this is the code from my controller:
#RequestMapping(value = "/login", method = RequestMethod.POST)
public ModelAndView loginUser(#ModelAttribute User user) throws FileNotFoundException {
if (patient.getPasswort().equals(patient.getPasswortConfirm())) {
Service.login(user);
ModelAndView modelAndView = new ModelAndView("mainpage");
modelAndView.addObject("user", user);
return modelAndView;
} else {
ModelAndView modelAndView = new ModelAndView("login");
modelAndView.addObject("wrongpw", true);
return modelAndView;
}
}
this is the code from the html page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="shortcut icon" type="image/ico" href="image/favicon.ico" />
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css" />
<script src="lib/jquery-2.1.4.js"></script>
</head>
<body>
<div id="menuebg"></div>
<p th:if="${wrongpw}"><font color="red">Password is wrong</font></p>
<div id="menue">
<form action="01erstellen" method="post" th:object="${patient}">
<table border="0px">
<tr height="20px">
<td>Name: <input th:field="*{nachname}" onchange="nameLive();" type="text" id="txtName" value="" />
</td>
</tr>
<tr height="20px">
<td>Vorname: <input th:field="*{vorname}" onchange="vornameLive();" type="text" id="txtVorname" value="" />
</td>
</tr>
<tr height="20px">
<td>Email: <input th:field="*{email}" type="text" />
</td>
</tr>
<tr height="20px">
<td><label for="gebdat"> Geburtsdatum: <input th:field="*{geburtstag}" type="date" id="gebdat" />
</label></td>
</tr>
<tr height="20px">
<td><label for="passwd">Passwort: <input th:field="*{passwort}" type="password" id="passwd" size="20" maxlength="40" />
</label></td>
</tr>
<tr height="20px">
<td><label for="passwd-confirm">Wiederholen: <input th:field="*{passwortConfirm}"
type="password" id="passwd-confirm" size="20" maxlength="40" />
</label></td>
</tr>
<tr height="20px">
<td></td>
</tr>
<tr height="20px">
<td>
<br/>
<input id="btn-send" type="submit" value="Finish" />
</td>
</tr>
<tr height="20px">
<td></td>
</tr>
</table>
</form>
</div>
</body>
</html>
my problem is that if i type in a wrong password the text only shows for a split second an then disappears.
can someone help me?
thank you!
I am using pure css to design my web page. I have this table/form on my page. Unfortunaltey it exceeds the width of my screen. How can I make the table autoamticall format so that it fits my screen? I would like that each columns "shrinks" until the table fits the screen width of the user.
<html>
<head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:200">
<link rel="stylesheet" href="css/layouts/style_pure.css">
<!--<link rel="stylesheet" type="text/css" href="style.css">-->
<!--[if lte IE 8]>
<link rel="stylesheet" href="css/layouts/side-menu-old-ie.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="css/layouts/side-menu.css">
<!--<![endif]-->
</head>
<body>
<form class="pure-table">
<table class="pure-table">
<thead>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
<td>Col5</td>
<td>Col6</td>
<td>Col7</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
</form>
</body>
</html>
set your table width to 100% , also set the text input fields inside each cell to 100% width.
here is a working example :
http://jsfiddle.net/ggLvLs3e/16/
CSS
.stretch{
width:100%;
}
input[type="text"]{
width:100%;
}
HTML
<table class="pure-table stretch">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
</tbody>
</table>
Only in Html for JSP and servlets. I have two checkbox there with two options "Yes" and "No". If, 'yes' enable all text inputs below it. if 'no' disable. This is my JSP:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="RegiPageDesign.css">
<title>Registration Page</title>
</head>
<body>
<div><h1>Please Provide the Following Details:</h1></div>
<form action="Servlet1" method="POST">
<table border="0">
<tbody>
<tr>
<td style="color: black">Vehicle Owners Name:</td>
<td><input type="text" name="vowner" value="" size="20" placeholder="e.g John Van Wyk"/></td>
</tr>
<tr>
<td style="color: black">Vehicle Drivers Name:</td>
<td><input type="text" name="vdriver" value="" size="20" placeholder="e.g Matheus Malima" /></td>
</tr>
<tr>
<td style="color: black">Vehicle Registration Number:</td>
<td><input type="text" name="vreginumber" value="" size="20" placeholder="e.g N 168-1258 W" /></td>
</tr>
<tr>
<td style="color: black">NABTA ID:</td>
<td><input type="text" name="nabtaId" value="" size="20" placeholder="e.g NABTA685" /></td>
</tr>
<tr>
<td style="color: black">Vehicle Type:</td>
<td><select name="vtype">
<option>Bus</option>
<option>Minibus</option>
<option>Taxi</option>
</select></td>
</tr>
<tr>
<td style="color: black">Vehicle Model:</td>
<td><input type="text" name="vmodel" value="" size="10" placeholder="e.g 2010" /></td>
</tr>
<tr>
<td style="color: black">Vehicle Mass:</td>
<td><input type="text" name="vmass" value="" placeholder="e.g 1.3 Tons" /></td>
</tr>
<tr>
<td style="color: black">Vehicle Color:</td>
<td><select name="colors">
<option>White</option>
<option>Silver</option>
<option>Red</option>
<option>Black</option>
<option>Blue</option>
</select></td>
</tr>
<tr>
<td style="color: black"> Was the vehicle in an Accident: </td>
<td>
<input type="checkbox" name="boo" value="" />Yes<br>
<input type="checkbox" name="boo" value="" />No<br>
</td>
</tr>
<tr>
<td style="color: black">How Many Times: </td>
<td><input type="text" name="number" value="" placeholder="Number(s)"/></td>
</tr>
<tr>
<td style="color: black">Cause of Accidents:</td>
<td><input type="text" name="vaccident" value="" placeholder="e.g Drunk Driving" /></td>
</tr>
<tr>
<td style="color: black">Date and Place of Accident:</td>
<div2><td><input type="date" name="adate" value="" placeholder="DD-MM-YY" /></div2>
<input type="text" name="regions" value="" placeholder="e.g Windhoek, Rehoboth" />
</td>
</tr>
</tbody>
</table>
<p style="text-align: center;"> <input type="reset" value="Clear" />
<input type="submit" value="Next" /></p>
<input type="button" value="Back" name="back"/>
</body>
</form>
</html>
It can be easily done by jQuery(Add this library to your header part), check the following script.
$('input[name=boo]').change(function(){
if(this.value=="yes"){
$(".accident").prop('disabled', false);
} else {
$(".accident").prop('disabled', true);
}
});
I assume that yes or no should be radio, since both cannot happen at the time ;) . See the live demo of working copy. Hope it helps.
Ok, this solution is do based on your title.
add javascript before <body>
<head>
<script language="Javascript">
function change()
{
var element = document.getElementById('textfieldID'); //depend which text field you wanted to disabled then add ID attribute for that textfield
var array = [];
while(element)
{
array.push(element);
element.id = 'textfieldID' + '-processed';
element = document.getElementById('textfieldID');
}
for(var i = 0; i < array.length; i++)
{
array[i].id = 'textfieldID';
if(document.mainform.boo.checked == true)
array[i].disabled=true;
else
array[i].disabled=false;
}
}
</script>
</head>
add onchange function for your checkbox
<tr>
<td style="color: black"> Was the vehicle in an Accident: </td>
<td>
<input type="checkbox" name="boo" value="" onchange="change();/>Yes<br>
<input type="checkbox" name="boo" value="" onchange="change();/>No<br>
</td>
</tr>
if you wanted to disabled all your input textfields when checkbox is checked. Then add all the same ID="" attribute in your input textfields. Hope it helps