Is it possible to have html tables on a form input?
What I am trying to figure out is how to make the form input a small box, and not a box that stretches across the whole page. Hopefully this screenshot makes sense:
The code below trying to implement tables and tables rows (tr) isn't working well, any tips greatly appreciated.
<h1>GEB Research</h1>
<hr>
<fieldset>
<table>
<tr>
<h2>Create Open ADR Event</h2>
</tr>
<tr>
<form method="post" action="/trigger">
<label>VEN ID:</label>
<input type="text" name="VEN ID" value="" required><br>
<tr>
<label>Open ADR Payload Simple Signal:</label>
<input type="number" name="Payload Signal" value="" required><br>
</tr>
<tr>
<label for="starttime">Choose start date and time for event:</label>
<input type="datetime-local" id="meeting-time" name="Event-Start" value="2020-07-12T19:30" min="2020-06-07T00:00" max="2024-06-14T00:00" required><br>
</tr>
<tr>
<label>Event Duration in Minutes:</label>
<input type="number" name="Minutes" value="" min="30" max="720" required><br>
<small>Minimun requirement of 30 and maximum of 720 Minutes</small>
</tr>
</table>
</fieldset>
<input type="submit" value="Submit">
</form>
use display : inline-block;
form {
display : inline-block;
}
<h1>GEB Research</h1>
<hr>
<form method="post" action="/trigger">
<fieldset>
<table>
<tr>
<h2>Create Open ADR Event</h2>
</tr>
<tr>
<label>VEN ID:</label>
<input type="text" name="VEN ID" value="" required><br>
<tr>
<label>Open ADR Payload Simple Signal:</label>
<input type="number" name="Payload Signal" value="" required><br>
</tr>
<tr>
<label for="starttime">Choose start date and time for event:</label>
<input type="datetime-local" id="meeting-time" name="Event-Start" value="2020-07-12T19:30" min="2020-06-07T00:00" max="2024-06-14T00:00" required><br>
</tr>
<tr>
<label>Event Duration in Minutes:</label>
<input type="number" name="Minutes" value="" min="30" max="720" required><br>
<small>Minimun requirement of 30 and maximum of 720 Minutes</small>
</tr>
</table>
</fieldset>
<input type="submit" value="Submit">
</form>
Add width: fit-content to fieldset css. You should also fix your tags (<form> has interesting placement)
fieldset {
width: fit-content;
}
<h1>GEB Research</h1>
<hr>
<form method="post" action="/trigger">
<fieldset>
<table>
<tr>
<h2>Create Open ADR Event</h2>
</tr>
<tr>
<label>VEN ID:</label>
<input type="text" name="VEN ID" value="" required><br>
<tr>
<label>Open ADR Payload Simple Signal:</label>
<input type="number" name="Payload Signal" value="" required><br>
</tr>
<tr>
<label for="starttime">Choose start date and time for event:</label>
<input type="datetime-local" id="meeting-time" name="Event-Start" value="2020-07-12T19:30" min="2020-06-07T00:00" max="2024-06-14T00:00" required><br>
</tr>
<tr>
<label>Event Duration in Minutes:</label>
<input type="number" name="Minutes" value="" min="30" max="720" required><br>
<small>Minimun requirement of 30 and maximum of 720 Minutes</small>
</tr>
</table>
</fieldset>
<input type="submit" value="Submit">
</form>
Related
Hello I'm pretty new to coding and while working on a project I tried to make a form with a submit and reset button, but when testing the form it doesn't work on the computer or mobile. Thank you for viewing this.
enter code here
<form id="form" action="contactform.php" method="post">
<label for="topic">Message Topic: </label>
<select name="topic">
<option value="Memberships">Memberships</option>
<option value="Careers">Careers</option>
<option value="Other">Other</option>
</select>
<br><br>
<label for="Name">Name: </label>
<br>
<input name="FName" id="firstname" type="text" placeholder="First" size="20" required>
<input name="LName" id="lastname" type="text" placeholder="Last" size="20" required>
<br><br>
<label for="email">Email: </label><br>
<input name="Email" id="email" type="email" size="25" required><br>
<label for="phone">Phone Number: </label><br>
<input name="Phone" id="phone" type="tel" size="12" required>
<br><br>
<label for="message">Enter a Message Here:</label>
<br>
<br><textarea name="messagebox" id="message"></textarea>
<br><br>
<input type="submit" id="submit" value="Submit"></button>
<input type="reset" id="clear" value="Clear"></button>
<br>
</form>
</div>
</body>
<script>
$(document).ready(function(){
$(#submit).on('click touch', function () {
alert("You are about to SUBMIT this form. Is that ok?");
});
});
</script>
The Problem is in your syntax. Change it to:
<button type="submit" id="submit">Submit</button>
<button type="reset" id="clear">Clear</button>
or
<input type="submit" id="submit" value="submit">
<input type="reset" id="clear" value="clear">
I just checked it. Seems like it works fine
Have a look at it:
https://codepen.io/kap1l/pen/gOYjjRZ?editors=1000
Thanks,
Also in submit and reset type you are using <input>
but closing is
</button>
Change both to either
<input></input>
or <button></button>
The problem is you didn't assign single quotes or double quotes in the $(#submit).
Change '#submit' to the id of the form and change 'click touch' to 'submit'.
<script>
$(document).ready(function(){
$('#form').on('submit', function () {
alert("You are about to SUBMIT this form. Is that ok?");
return true;
});
});
</script>
You have couple of issues in your code
Remove the closing tags </button>, firstly because you do not have corresponding opening tags for them, secondly you need not use them as you already achieved the same by using <input> elements.
JQuery issue, you need to enclose id within double quotes/single quotes
$(#submit) should be $("#submit")
Here is the working code JSFiddle
Do this
<button type="button" id="submit">Submit</button>
<button type="button" id="clear">Clear</button>
$("#submit").on('click', function () {
instead of
<input type="submit" id="submit" value="Submit"></button>
<input type="reset" id="clear" value="Clear"></button>
$(#submit).on('click touch', function () {
In your html, u did some mistakes like for submit buttons, you started with <input> and trying to close it with <button>
so replace it with
<input type="submit" id="submit" value="Submit"/>
<input type="reset" id="clear" value="Clear"/>
In script while using a selector please put the selector inside "" OR '' like $('#submit') insted of using it $(#submit)
$(document).ready(function(){
$('#submit').on('click', function () {
alert("You are about to SUBMIT this form. Is that ok?");
});
});
label{
font-size:20px;
margin-right:20px;
}
textarea
{
width:100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form" action="contactform.php" method="post">
<table>
<tr>
<td> <label for="topic">Message Topic: </label></td>
<td>
<select name="topic">
<option value="Memberships">Memberships</option>
<option value="Careers">Careers</option>
<option value="Other">Other</option>
</select>
</td>
</tr>
<tr>
<td> <label for="Name">Name: </label></td>
<td>
<input name="FName" id="firstname" type="text" placeholder="First" size="20" required>
<input name="LName" id="lastname" type="text" placeholder="Last" size="20" required>
</td>
</tr>
<tr>
<td> <label for="email">Email: </label></td>
<td>
<input name="Email" id="email" type="email" required>
</td>
</tr>
<tr>
<td> <label for="phone">Phone Number: </label></td>
<td>
<input name="Phone" id="phone" type="number" required>
</td>
</tr>
<tr>
<td> <label for="message">Enter a Message Here:</label></td>
<td>
<textarea name="messagebox" rows=5 id="message"></textarea>
</td>
</tr>
<tr>
<td> <input type="submit" id="submit" value="Submit"/>
<input type="reset" id="clear" value="Clear"/>
</td>
</tr>
</table>
</form>
Here is a sample code I got from my textbook and for some reason it's not displaying correctly. I just can't find the error.
It only show the second input text field "surname" and not the first input text "First name" also.
<html>
<head><title>Holiday Program</title></head>
<body style="background-color:cyan">
<form action="HolidayChoice.jsp"> <!--also try this with method="post"-->
<center>
<table style="background-color:lightblue”>
<tr>
<td>First Name<input type="text" name="clientFirstName"></td>
<td>Surname<input type="text" name="clientSurname"></td>
</tr>
<tr>
<td>Location :<br/>
<input type="radio" name="location" value="ocean"
checked=”true”>Ocean<br/>
<input type="radio" name="location" value="lake">Lake<br/>
<input type="radio" name="location" value="nature">
Nature Reserve<br/>
<input type="radio" name="location" value="casino">Casino<br/>
</td>
<td>Accommodation Type :<br/>
<input type="checkbox" name="hotel" value="1">Hotel<br/>
<input type="checkbox" name="camping" value="1">Camping<br/>
<input type="checkbox" name="caravan" value="1">Caravan<br/>
<input type="checkbox" name="bungalow" value="1">Bungalow
</td>
</tr>
<tr>
<td colspan="2">
<center>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</center>
</td>
</tr>
</table>
</center>
</form>
</body>
</html>
You're using ” instead of " at line 6
I would like to use one input field that is referenced by multiple forms on one page. or I would like to use <input form="form1,form2,form3,form4" type="text" name="name" required autocomplete="off"/><br> or call the input field every time i submit each of the forms
<table align="center">
<tr>
<td colspan="5" align="center">Group Name:
<input form="form1,form2,form3,form4" type="text" name="name" required autocomplete="off"/><br>
</td>
</tr>
<tr>
<td>
<form id="form1" action="plan.php" method="post">
<input type="hidden" name="number" value="0"><br>
<input type="hidden" name="priceplan" value="25"><br><br>
<input type="submit" value="10 PAX" style="width:100%; margin-top:0px;" class="button">
</form>
</td>
<td>
<form id="form2" action="plan.php" method="post">
<input type="hidden" name="number" value="0"><br>
<input type="hidden" name="priceplan" value="2"><br><br>
<input type="submit" value="10 People" style="width:100%; margin-top:0px;" class="button">
</form>
</td>
<td>
<form id="form3" action="plan.php" method="post">
<input type="hidden" name="number" value="0"><br>
<input type="hidden" name="priceplan" value="3"><br><br>
<input type="submit" value="20 People" style="width:100%; margin-top:0px;" class="button">
</form>
</td>
<td>
<form id="form4" action="plan.php" method="post">
<input type="hidden" name="number" value="0"><br>
<input type="hidden" name="priceplan" value="4"><br><br>
<input type="submit" value="30 People" style="width:100%; margin-top:0px;" class="button">
</form>
</td>
<td>
<form id="form5" action="plan.php" method="post">
<input type="hidden" name="number" value="0"><br>
<input type="hidden" name="priceplan" value="5"><br><br>
<input type="submit" value="40 People" style="width:100%; margin-top:0px;" class="button">
</form>
</td>
</tr>
</table>
I would like to use <input form="form1,form2,form3,form4" type="text" name="name" required autocomplete="off"/><br> or call the input field every time i submit each of the forms
You can achieve this using Javacsript here is an example using jQuery:
first you give ur unique input an ID (id="uniqueInput")
then on the submit you append it to the form
$('form').submit(function(e){
e.preventDefault();
$('<input>').attr({
type: 'hidden',
id: 'foo',
name: 'bar',
value: $('#uniqueInput').val()
}).appendTo($(this));
})
I have two table rows with Date and Time values. My input fields are not centered, I aligned my tr to left. So I'm trying to center input from first tr and second tr.
Here is example: https://jsfiddle.net/dmilos89/qyq9cp7j/
HTML code:
<tr align="left">
<td class="dateTime">
<label>Pick up Date</label>
<input name="DateFrom" id="DateFrom" style="width:100px" size="10" maxlength="10" class="dtefld" value="">
<label>Pick up Time</label>
<input name="TimeFrom" id="TimeFrom" class="time" type="text" size="10" maxlength="10" value="">
</td>
</tr>
<br>
<tr align="left">
<td class="dateTime">
<label>Drop off Date</label>
<input name="DateTo" id="DateTo" style="width:100px" size="10" maxlength="10" class="dtefld" value="">
<label>Drop off Time</label>
<input name="TimeTo" id="TimeTo" class="time" type="text" size="10" maxlength="10" value="">
</td>
</tr>
If anyone knows how to fix this please let me know. Thanks.
This fixes it:
label {display: inline-block; width: 100px;}
Preview
Trying to get the input fields of my html to align up with the other input fields.
Is there a way to make it aligned without using CSS?
This is what I have :
Name:|-----Input-------|
Password:|-----Input-------|
Confirm password:|-----Input-------|
Email:|-----Input-------|
Phone:|-----Input-------|
Trying to make it like this:
Name:.....................|-----Input-------|
Password:..............|-----Input-------|
Confirm password:|-----Input-------|
Email:.....................|-----Input-------|
Phone:...................|-----Input-------|
(without the dots)
Code:
<form>
<label>Name:</label>
<input type="text" name="namefield" align="center"> <br />
<label><br>Password: </label>
<input type="password" name="pwdfield"> <br />
<label><br>Confirm password: </label>
<input type="password" name="cpwdfield"> <br />
<label><br>Email: </label>
<input type="email" name="email"> <br />
<label><br>Phone: </label>
<input type="tel" name="phone"> <br />
<br>
<input type="submit" value="Register" />
</form>
Using the table tag without borders allows one to align textboxes without css.
<FORM>
<TABLE frame="box">
<TR><TD>Your name</TD> <TD><INPUT TYPE="TEXT" NAME="name" SIZE="25"></TD> </TR>
<TR><TD>Password</TD> <TD><INPUT TYPE="TEXT" NAME="pwdfield" SIZE="25"></TD> </TR>
<TR><TD>Confirm password</TD> <TD><INPUT TYPE="TEXT" NAME="cpwdfield" SIZE="25"></TD> </TR>
<TR><TD>E-mail</TD> <TD><INPUT TYPE="TEXT" NAME="email" SIZE="25"></TD> </TR>
<TR><TD>Phone</TD> <TD><INPUT TYPE="TEXT" NAME="phone" SIZE="25"></TD> </TR>
</TABLE>
<P><INPUT TYPE="SUBMIT" VALUE="Register" NAME="B1"></P>
</FORM>