i have the following html to Capture some Data.
<fieldset>
<legend>Rezept hinzufügen</legend>
<form action="php_act/create.php" method="post">
<table cellspacing="0" cellpadding="0">
<tr>
<th>Rezept Name</th>
<td><input type="text" name="name" placeholder="Rezept Name" /></td>
</tr>
<tr>
<th>Kurzbeschreibung</th>
<td><input type="text" name="kurztext" placeholder="Kurzbeschreibung" class="kurztext" /></td>
</tr>
<tr>
<th>Kategorie</th>
<td><input type="text" name="Kategorie" placeholder="Kategorien - mit , trennen" /></td>
</tr>
<tr>
<th>Anforderung</th>
<td><select name="Anforderung">
<option value="einfach">einfach</option>
<option value="mittel">mittel</option>
<option value="schwer">schwer</option>
</select></td>
</tr>
<tr>
<th>Zeit / Nährwerte</th>
<td><input type="text" name="zeit" placeholder="Zeit in minuten" /></td>
<td><input type="text" name="KCAL" placeholder="KCAL" size="6"/></td>
<td><input type="text" name="KH" placeholder="KH" size="6"/></td>
<td><input type="text" name="Eiweiss" placeholder="Eiweiss" size="6"/></td>
<td><input type="text" name="Fett" placeholder="Fett" size="6" /></td>
</tr>
<tr>
<th>Portionen</th>
<td><input type="text" name="Portionen" placeholder="Portionen" /></td>
</tr>
<tr>
<th>Zutaten</th>
<td><input type="text" name="zutaten" placeholder="Zutaten" /></td>
</tr>
<tr>
<th>Zubereitung</th>
<td><input type="text" name="zubereitung" placeholder="Zubereitung" /></td>
</tr>
<tr>
<th>FotoliaID</th>
<td><input type="text" name="FotoliaID" placeholder="FotoliaID" /></td>
</tr>
<tr>
<td><button type="submit">Speichern</button></td>
<td><button type="button">zurück</button></td>
</tr>
</table>
</form>
</fieldset>
There are some Input Type Text. i need to capture line breaks within the textfields. Problem is that "Enter" submits by default the. Is it possible to change that. Enter should add a line break in the textfield and not submit the form.
Can't you use textarea instead of textbox?
In a textarea you can insert enters.
https://www.w3schools.com/tags/tag_textarea.asp
Related
I have read many articles related to this topic but none of these articles proffer exact solution to what I am trying to achieve.
I'll like to make "COMPUTER SCIENCE" a static text in the input filed for "Department in the following code".
<table>
<tr>
<td><label for="Username">Username</label></td>
<td><input name="txtusername" type="text" id="txtusername" style="height:20px; width:208px" /></td>
</tr>
<tr>
<td><label for="Password">Password</label></td>
<td><input name="txtpassword" type="password" id="txtpassword" style="height:20px; width:208px" /></td>
</tr>
<tr>
<td><label for="Lastname">Lastname</label></td>
<td><input name="txtlastname" type="text" id="txtlastname" style="height:20px; width:208px" /></td>
</tr>
<tr>
<td><label for="Firstname">Firstname</label></td>
<td><input name="txtfirstname" type="text" id="txtfirstname" style="height:20px; width:208px" /></td>
</tr>
<tr>
<td><label for="Sex">Sex</label></td>
<td>
<select name="sex" class="form-control" required>
<option value=""> ----- </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td><label for="ContactNo">Contact No</label></td>
<td><input name="txtcontactno" type="text" id="txtcontactno" style="height:20px; width:208px" /></td>
</tr>
<tr>
<td><label for="MatricNo">Matric No</label></td>
<td><input name="txtmatricno" type="text" id="txtmatricno" style="height:20px; width:208px" /></td>
</tr>
<tr>
<td><label for="Programme">Programme</label></td>
<td><input name="txtprogramme" type="text" id="txtprogramme" style="height:20px; width:208px" /></td>
</tr>
<tr>
<td><label for="Department">Department</label></td>
<td> <input name="txtdept" type="text" id="txtdept" style="height:20px; width:208px" /></td>
</tr>
<tr>
<td><label for="CFaculty">Faculty</label></td>
<td><input name="txtfaculty" type="text" id="txtfaculty" style="height:20px; width:208px" /></td>
</tr>
<tr>
<td><label for="UploadPhoto">UploadPhoto</label></td>
<td><input type="file" name="image" /> </td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="add" value="Register" id="submit" />
<input type="submit" name="Reset" value="Cancel" id="Reset" />
</td>
</tr>
</table>
I want to achieve a result similar to the output in the attached picture:
Any suggestion or recommendation is greatly appreciated.
As already mentioned, disabling the input field would be the first step.
<tr>
<td><label for="Department">Department</label></td>
<td><input name="txtdept" type="text" id="txtdept" style="height:20px; width:208px" disabled/></td>
</tr>
If the value of the department needs to be static, you can just define it directly in the input field.
<td><input name="txtdept" type="text" id="txtdept" style="height:20px; width:208px" value="COMPUTER SCIENCE" disabled/></td>
In case the department would have a correlation with a value from an other input field, you could theoretically use JS with some If-Statements.
$(document).ready(function(){
var txtdept = document.getElementById("txtdept");
txtdept.value = "COMPUTER SCIENCE";
});
Not too sure what you mean by static text but you have two ways of doing what is in the image: you can either add placeholder="COMPUTER SCIENCE" the input
<input name="txtdept" type="text" id="txtdept" style="height:20px; width:208px" placeholder="COMPUTER SCIENCE" />
and/or add value="COMPUTER SCIENCE".
<input name="txtdept" type="text" id="txtdept" style="height:20px; width:208px" placeholder="COMPUTER SCIENCE" value="COMPUTER SCIENCE" />
The placeholder is meant to show when the input is empty. The value will just be the default value of the input and can be changed by the user. You can add disabled to the input if you don't want the user to change the content of the input.
<input name="txtdept" type="text" id="txtdept" style="height:20px; width:208px" value="COMPUTER SCIENCE" disabled/>
This is my table and I want to put the second table beside the first table but when I tried it nothing happen and also how can I make my table in the same width as the second table I tried to add width, but the table cannot sync together
enter image description here
and this is my code
<table border="1" bordercolor="#336699" align="center">
<!-- TABLE -->
<tr>
<td><b>LAST NAME:<b></td>
<td><input type="text" name="lname"></td>
</tr>
<tr>
<td><b>FIRST NAME:</b></td>
<td><input type="text" name="fname"></td>
</tr>
<tr>
<td><b>MIDDLE NAME:<b></td>
<td><input type="text" name="mname"></td>
</tr>
<tr>
<td><b>COURSE:</b></td>
<td>
<select name="course">
<option value="BSCS">BSCS</option>
<option value="BSIT">BSIT</option>
<option value="BSCE">BSCE</option>
<option value="BSEMC">BSEMC</option>
</select>
</tr>
</div>
</div>
<!-- TABLE 2 -->
<table border="1" bordercolor="#336699" align="center">
<tr>
<td><b>SEX:</b></td>
<td>
<select name="gender">
<option value="FEMALE">FEMALE</option>
<option value="MALE">MALE</option>
</select>
<tr>
<td><b>AGE:<b></td>
<td><input type="text" name="age"></td>
</tr>
<tr>
<td><b>CONTACT NUMBER:<b></td>
<td><input type="text" name="cp"></td>
</tr>
</tr>
<tr>
<td><label for="birthday"><b>BIRTHDAY:</b></label>
</td>
<td><input type="date" name="birthday"></td>
</tr>
<tr>
<td><b>FATHER NAME:<b></td>
<td><input type="text" name="ffname"></td>
</tr>
<tr>
<td><b>MOTHER NAME:<b></td>
<td><input type="text" name="mmname"></td>
</tr>
<tr>
<td><b>GUARDIAN NAME:<b></td>
<td><input type="text" name="mmname"></td>
</tr>
<tr>
<td><b>ADDRESS:<b></td>
<td><textarea name="w3review" rows="3" cols="15">
</textarea>
</td>
</tr>
<tr>
<td colspan="2"><center><input type="submit" value="Save">
<input type="reset" value="clear"></center>
</td>
</tr>
You had a wrong HTML structure.
To put them the way you wanted you need to wrap the two tables with a div. I call it a container. And set a CSS rule "display: flex"
.container {
display: flex
}
<div class="container">
<table border="1" bordercolor="#336699" align="center">
<tr>
<td><b>LAST NAME:</b></td>
<td><input type="text" name="lname" /></td>
</tr>
<tr>
<td><b>FIRST NAME:</b></td>
<td><input type="text" name="fname" /></td>
</tr>
<tr>
<td><b>MIDDLE NAME:</b></td>
<td><input type="text" name="mname" /></td>
</tr>
<tr>
<td><b>COURSE:</b></td>
<td>
<select name="course">
<option value="BSCS">BSCS</option>
<option value="BSIT">BSIT</option>
<option value="BSCE">BSCE</option>
<option value="BSEMC">BSEMC</option>
</select>
</td>
</tr>
</table>
<!-- TABLE 2 -->
<table bordercolor="#336699" align="center">
<tr>
<td><b>SEX:</b></td>
<td>
<select name="gender">
<option value="FEMALE">FEMALE</option>
<option value="MALE">MALE</option>
</select>
</td>
</tr>
<tr>
<td><b>AGE:</b></td>
<td><input type="text" name="age" /></td>
</tr>
<tr>
<td><b>CONTACT NUMBER:</b></td>
<td><input type="text" name="cp" /></td>
</tr>
<tr>
<td>
<label for="birthday"><b>BIRTHDAY:</b></label>
</td>
<td><input type="date" name="birthday" /></td>
</tr>
<tr>
<td><b>FATHER NAME:</b></td>
<td><input type="text" name="ffname" /></td>
</tr>
<tr>
<td><b>MOTHER NAME:</b></td>
<td><input type="text" name="mmname" /></td>
</tr>
<tr>
<td><b>GUARDIAN NAME:</b></td>
<td><input type="text" name="mmname" /></td>
</tr>
<tr>
<td><b>ADDRESS:</b></td>
<td><textarea name="w3review" rows="3" cols="15"> </textarea></td>
</tr>
<tr>
<td colspan="2">
<center><input type="submit" value="Save" /> <input type="reset" value="clear" /></center>
</td>
</tr>
</table>
</div>
I have a html table
If Production Profit % between:
<table id="tableDataInp">
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
</tr>
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
</tr>
</table>
How can I give a % sign at the end of each row? I tried using % sign after each but %is displayed at the top of table.
https://www.screencast.com/t/hZ9gebf1m Current Output
Expected Output : https://www.screencast.com/t/7OSfvlMgV5x % should be displayed in place of Red Square.
You could do it using CSS and an after element.
table td:last-child::after {
content: '%';
}
<table id="tableDataInp">
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
</tr>
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
</tr>
</table>
So the CSS selector selects the last td in each row and adds an after element with the content of %
You can then apply further styling to the after element (margin, font size etc).
Add after pseudo property
#tableDataInp tr:after{
content:"%";
color:#fff;
width:20px;
height:20px;
border-radius:5px;
background:red;
padding:3px;
}
https://jsfiddle.net/lalji1051/s25cvyda/2/
You could simply add an extra cell per row:
<table id="tableDataInp">
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td width="30">%</td>
</tr>
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td width="30">%</td>
</tr>
</table>
This question already has answers here:
HTML form email using mailto in form action doesnt work in Internet Explorer
(3 answers)
Closed 4 years ago.
I made a simple form to meet the needs on my website. It was as wanted, however, I am not able to use the "mailto" function to send the information provided by the user to my email.
After pressing the "send" button, no action is taken. can anybody help me?
NOTE: The form is HTML-only, no database usage, it's just an e-mail bridge.
<div class ="Formulario">
<div align="center">
<form id="form1" name="formulario" method="post" action="mailto:helpcelere#gmail.com">
<table width="200" height="250" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><input name="txt_nome" type="text" form="form1" placeholder="Nome" /></td>
</tr>
<tr>
<td><input name="txt_titulo" type="text" id="txt_titulo" form="form1" placeholder="Título do problema" titulo="txt_titulo" /></td>
</tr>
<tr>
<td><input name="txt_email" type="text" id="txt_email" form="form1" placeholder="Seu e-mail" email="txt_email" /></td>
</tr>
<tr>
<td><textarea cols="50" rows="8" form="form1" placeholder="Mensagem"></textarea></td>
</tr>
<tr>
<td><input type="submit" form="form1" formaction="mailto:helpcelere#gmail.com" formmethod="POST" value="enviar" /></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
try this instead
<div class ="Formulario">
<div align="center">
<form id="form1" name="formulario" method="post" action="mailto:helpcelere#gmail.com">
<table width="200" height="250" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><input name="txt_nome" type="text" form="form1" placeholder="Nome" /></td>
</tr>
<tr>
<td><input name="txt_titulo" type="text" id="txt_titulo" form="form1" placeholder="Título do problema" titulo="txt_titulo" /></td>
</tr>
<tr>
<td><input name="txt_email" type="text" id="txt_email" form="form1" placeholder="Seu e-mail" email="txt_email" /></td>
</tr>
<tr>
<td><textarea cols="50" rows="8" form="form1" placeholder="Mensagem"></textarea></td>
</tr>
<tr>
<td><input type="submit" value="enviar" /></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
I've created a simple HTML5 form, with the code below.
It successfully works in Chrome in W10, as well as in Chrome on my Android Phone.
The autosum function doesn't work on an iPad in Safari, nor Chrome.
What am I missing?
Cheers,
Stewart
<form onsubmit="return false" oninput="tta.value = parseInt(r1ta.value)+parseInt(r2ta.value)+parseInt(r3ta.value)+parseInt(r4ta.value);ttb.value = parseInt(r1tb.value)+parseInt(r2tb.value)+parseInt(r3tb.value)+parseInt(r4tb.value);te.value = parseInt(r1e.value)+parseInt(r2e.value)+parseInt(r3e.value)+parseInt(r4e.value)">
<table style="height: 97px;" width="216">
<tbody>
<tr>
<td>RINK</td>
<td>TEAM A</td>
<td>TEAM B</td>
<td>ENDS</td>
</tr>
<tr>
<td>1</td>
<td><input id="r1ta" name="r1ta" type="number" /></td>
<td><input id="r1tb" name="r1tb" type="number" /></td>
<td><input id="r1e" name="r1e" type="number" /></td>
</tr>
<tr>
<td>2</td>
<td><input id="r2ta" name="r2ta" type="number" /></td>
<td><input id="r2tb" name="r2tb" type="number" /></td>
<td><input id="r2e" name="r2e" type="number" /></td>
</tr>
<tr>
<td>3</td>
<td><input id="r3ta" name="r3ta" type="number" /></td>
<td><input id="r3tb" name="r3tb" type="number" /></td>
<td><input id="r3e" name="r3e" type="number" /></td>
</tr>
<tr>
<td>4</td>
<td><input id="r4ta" name="r4ta" type="number" /></td>
<td><input id="r4tb" name="r4tb" type="number" /></td>
<td><input id="r4e" name="r4e" type="number" /></td>
</tr>
<tr>
<td>TOTAL</td>
<td><output for="r1ta r2ta r3ta r4ta" name="tta"></output></td>
<td><output for="r1tb r2tb r3tb r4tb" name="ttb"></output></td>
<td><output for="r1e r2e r3e r4e" name="te"></output></td>
</tr>
</tbody>
</table>
</form>
Because your field's default value is not 0 it is null. so it cannot be able to sum 1 + null for ins.