I am doing a calculator and maxlenght is not working. After I set maxlength to 12, when clicking calculator buttons it do more then 12.
<input type="text" maxlength="12" name="display" id="result" disabled placeholder="0">
This is essentially the html from your comment. The maxlength property of an input tag only applies when the user is typing into it. When you set the result programmatically, it is not respected.
document.getElementById("result").value = "1234567890123456";
<div id="history" placeholder="0"></div>
<input type="text" maxlength="12" name="display" id="result" disabled placeholder="0">
<table>
<tr>
<td>
<input type="button" class="buttons1" value="7" onclick="calculator.display.value += '7'" />
</td>
</tr>
</table>
I'm not sure what you are asking, but the following works:
<input type="text" maxlength="12" name="display" id="result" placeholder="0">
Related
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>
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>
Create a DIV with an attribute of data-cc-digits. It should contain four INPUT text fields, each with a size of 4 and a placeholder of ---- (4 dashes).
Code checker says: "You need to create the specified INPUT elements within the data-cc-digits DIV"
It does not specify if I should use maxlength or minlength to clamp the input.
<div data-cc-digits="">
<input type="text" size="4" placeholder="----">
<input type="text" size="4" placeholder="----">
<input type="text" size="4" placeholder="----">
<input type="text" size="4" placeholder="----">
</div>
You should show more codes. But, it appears you will get the same error if your data-cc-digits inputs are wrong and if your data-cc-info inputs are wrong.
Try this:
<div data-cc-digits>
<input type="text" size="4" placeholder="----" />
<input type="text" size="4" placeholder="----" />
<input type="text" size="4" placeholder="----" />
<input type="text" size="4" placeholder="----" />
</div>
<div data-cc-info>
<input type="text" size="20" placeholder="Name Surname" />
<input type="text" size="6" placeholder="MM/YY" />
</div>
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>
i am trying to recreate the login form shown on tinypic's main page.
in html, i have the 3 elemnts like this:
E-Mail:
<input type="text" name="id" maxlength="30" value="" />
Password:
<input type="text" name="pw" maxlength="30" value="" />
<input type="submit" name="submit" value="Login" />
i have tried putting them into separate divs,
using float:left with a unique class in css
but the code is really messy unreasonably long.
so essentially, i wanted to know if there was a simple way to achieve this layout with html and css.
thanks for the time!
This CSS should work, though I haven't tested:
input { display: inline; }
Here is my solution: ( http://jsfiddle.net/HcppN/ )
HTML:
<label>E-Mail:</label>
<input type="text" name="id" maxlength="30" value="" />
<label>Password:</label>
<input type="text" name="pw" maxlength="30" value="" />
<input type="submit" name="submit" value="Login" />
CSS:
input, label {
float:left;
margin:5px;
}
I also recommend you to encapsulate the labels in <label> tags. You can even use the for="inputId" attribute, so that clicking on the label brings the input into focus.
Just add display:inline to your input elements, as shown here
Though there are already accepted and up voted answers, I just want to contribute a way to make a form horizontal without any kind of CSS. Using HTML table is an effective way to make a horizontal form.
Example 1:
<table>
<tr>
<td>First Name</td>
<td><input type="text" name="fname" > </td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="lname" > </td>
</tr>
</table>
</form>
Example 2:
<form method="">
<table>
<tr>
<td><input type="text" name="fname" ></td>
<td><input type="text" name="lname" ></td>
........................
</tr>
</table>
</form>
My experience says, sometimes in different cases the CSS/class may not work or sometimes they may conflict ; but using an HTML table to make an HTML form is something like forcing to be what we want to be appear. Thank you.