I been doing some html code in a few days now, but i can't figure out how to make the it all in a horizontal look, just like this exsampel:
ID Name Commodity Weight Tolerance
Box Box drop down box box
So box stands for "input form" ofc, and a drop down should be full of names of commodities from my database.
Right now, i have this code so far:
<body>
<div id="header">
<h2 align="center" style="color: #FFFFFF">Edit Recept</h2>
</div>
<div id="content">
<div id="form-wrapper">
<form method="post" action="Front">
<table>
<tr>
<td>ID: <td>
<td><input type="text" name="Id" />
</tr>
<tr>
<td>Name:<td>
<td><input type="text" name="name" />
</tr>
</table>
<table>
<tr>
<p> </p>
<p>Add commodities to your recept: <p>
</tr>
<tr>
<td>Select commodity:<td>
<td><select>
<option value="" disabled="disabled" selected="selected">Please select Commodity</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</tr>
<tr>
<td>Weight:<td>
<td><input type="text" name="tolerance" />
</tr>
<tr>
<td>Tolerance:<td>
<td><input type="text" name="name" />
</tr>
<tr>
<td><input type="submit" value="Add" /><td>
<tr>
</table>
<br>
<input type="submit" value="Save" />
<input type="reset" value="Cancel" />
<input type="hidden" name="whichPage" value="prescription"/>
</form>
</div>
<p align="center">
Enter the new values and press save to make the change
</p>
</div>
Is there a trick how to do it easy?? My goal is to make it like i described on the top, and then add a button which will add a new line of input boxes under the other if you want to store more commodities in the same prescription.
Just make your labels all in one single row of the table, then the input fields for those labels should be jsut under in a second row. So you will have a colomn based input just as you wish, here is a fiddle as a sample.
<div id="header">
<h2 align="center" style="color: #FFFFFF">Edit Recept</h2>
</div>
<div id="content">
<div id="form-wrapper">
<form method="post" action="Front">
<table>
<tr>
<td>ID </td>
<td>Name</td>
<td>Select commodity</td>
<td>Weight</td>
<td>Tolerance</td>
</tr>
<tr>
<td><input type="text" name="Id" /></td>
<td><input type="text" name="name" /></td>
<td><select>
<option value="" disabled="disabled" selected="selected">Please select Commodity</option>
<option value="1">One</option>
<option value="2">Two</option>
</select></td>
<td><input type="text" name="tolerance" /></td>
<td><input type="text" name="name" /></td>
</tr>
</table>
<br />
<input type="submit" value="Save" />
<input type="reset" value="Cancel" />
<input type="hidden" name="whichPage" value="prescription"/>
</form>
</div>
<p align="center">
Enter the new values and press save to make the change
</p>
</div>
Note: You should pay attention to the closing tags for table element markups as you are missing some and introducing an open tag instead of a closing one in some rows.
Just a small hint. This will show the text and input box below each other. But you need to rearrange your whole table with the proper manner. Also dont use multiple tables. Use single table with many columns.
<table>
<tr>
<td>ID: </td>
<td>Name:</td>
</tr>
<tr>
<td><input type="text" name="Id" /></td>
<td><input type="text" name="name" /></td>
</tr>
</table>
Related
I'd like to add label on my website using Thymeleaf fields, too.
I wrote the following code:
<form id="newFoo" action="#" th:action="#{'/save'}" th:object="${foo}"
method="post" autocomplete="off">
<table>
<tr>
<td> <label for="name" form="newFoo">Name</label></td>
<td>
<input id="name" type="text" th:field="*{name}" required="required">
</td>
</tr>
<tr>
<td> <label for="gender" form="newFoo">Gender</label> </td>
<td>
<select id="gender" th:field="*{gender}" required="required">
<option th:each="g : ${genders}"
th:value="${g.id}" th:text="${g.name}" ></option>
</select>
</td>
</tr>
<tr>
<td> <label for="birthday" form="newFoo">Birthday</label></td>
<td>
<input id="birthday" type="date" th:field="*{birthday}" min="1900-01-01" max="2100-01-01" required="required">
</td>
</tr>
<tr>
<td><label for="height" form="newFoo">Height</label></td>
<td> <input id="height" type="number" th:field="*{height}" required="required"> </td>
</tr>
<tr>
<td colspan="2">
<button type="submit">Submit</button>
</td>
</tr>
</table>
</form>
When I tried to navigate through my form by NVDA, only the labels of texts and select were shown and said. Numbers and date were not shown. I tried it on Google Chrome and on Firefox.
Trying w3school, number worked, too.
How can I solve it?
I am trying to create buttons in a form, which doesn't submit the form. I have a button to submit the form, and that's the only one I want to submit. The buttons that I wish to create should have access to all the form, without needing to reload (and loose data) the form.
My view is:
<form method="post">
<table>
<tr>
<td><label>Nº Encomenda</label></td>
<td><input asp-for="encID" readonly="readonly" style="background-color:lightgray;" /></td>
</tr>
<tr>
<td><label>Farmácia</label></td>
<td><input asp-for="farmDetails.cliNome" readonly="readonly" /></td>
</tr>
<tr>
<td><label>Contactos</label></td>
<td><input asp-for="farmDetails.cliTelefone[0]" readonly="readonly" /><input asp-for="farmDetails.cliTelefone[1]" readonly="readonly" /></td>
</tr>
<tr>
<td><label>Rua</label></td>
<td><input asp-for="farmDetails.locRua" readonly="readonly" /></td>
</tr>
<tr>
<td><label>Localidade</label></td>
<td><input asp-for="farmDetails.locLocalidade" readonly="readonly" /></td>
</tr>
<tr>
<td><label>Código Postal</label></td>
<td><input asp-for="farmDetails.locCodPostal" readonly="readonly" /></td>
</tr>
<tr>
<td>#Html.LabelFor(m => m.aSelVM.SelectedArm)</td>
<td>#Html.DropDownListFor(m => m.aSelVM.SelectedArm, Model.aSelVM.ArmList, "Seleccionar...")</td>
#Html.ValidationMessageFor(m => m.aSelVM.SelectedArm)
</tr>
<tr>
<td>#Html.LabelFor(m => m.aSelVM.SelectedArmLoc)</td>
<td>#Html.DropDownListFor(m => m.aSelVM.SelectedArmLoc, Model.aSelVM.ArmLocList)</td>
</tr>
#await Html.PartialAsync("_ProdPartialView", Model.pVM)
</table>
<div>
<input type="submit" formaction="/Order/AddProdWnd" value="Adicionar" /><!--Adicionar</button>-->
<input type="button" asp-action="RemoveProd" asp-controller="Order" value="Eliminar" />
</div>
<div>
Origem da Venda
<select asp-for="origemVenda" asp-items="Html.GetEnumSelectList<originSellType>()">
<option selected="selected" value="">Seleccionar...</option>
</select>
</div>
<div>
Prioritário <input asp-for="isPrioritario" />
</div>
<div>
<p><label>Observações</label></p>
<textarea asp-for="observs"></textarea>
</div>
<input type="submit" value="Guardar" asp-action="SendOrdForm" asp-controller="Order" />
</form>
The buttons "Adicionar", "Eliminar" are the one's that I am referring to.
I am using a very complex data structure, I know...
Could you help me?
Thank you.
I trying to make the text bar wider but I cant get it to work. I have tried with width but it didn't work for me. I also couldn't find anything on the internet.
This is my HTML:
HTML:
<form action="" method="post">
<legend>Neem contact op</legend>
<table>
<tr>
<td>
<label for="Naam">Naam: </label>
</td>
<td>
<input type="text" id="Naam" name="Naam" placeholder="Naam" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Email">Email :</label>
</td>
<td>
<input type="email" id="Email"name="Email" placeholder="Email" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Seizoen">Seizoen: </label>
</td>
<td>
<select name="Seizoen" id="Seizoen" required>
<option value="">Kies hier je seizoen</option>
<option value="Lente">Lente</option>
<option value="Zomer">Zomer</option>
<option value="Herfst">Herfst</option>
<option value="Winter">Winter</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="Benodigheden">Benodigheden:</label>
</td>
<td>
<input type="text" id="Benodigheden"name="Benodigheden" placeholder="Benodigheden" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Opmerking">Opmerking:</label>
</td>
<td>
<textarea name="Opmerking" id="Opmerking" cols="40" rows="5" placeholder="Opmerking" required="required" /></textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div class="submit"><input type="submit" value="Verzenden" name="Verzenden" /></div>
</td>
</tr>
</table>
Here is a link to JSFiddle.
While the above code is very good, minimal and clean, which is best. But IF you need different widths for each of your text inputs then inline CSS is needed.
Example code:
<input style="width: 300px;" type="text">
<input style="width: 340px;" type="text">
If you only wish to make input-type="text" have a certain width, add this style in your css file fx:
input[type=text] {
width: 300px;
}
add some css to the head section of your html
<style>
input{width: 300px}
</style>
Make your table wider.
Add desired width to your td's
Ajust your inputs widht.
I'm not sure what I'm missing here. I'm just trying to get the submit button to send the information to my email. What am I doing wrong? Sorry for all the table code, had to be a table for an assignment.
<form method="post" action="mailto:suzanne#nielsenwebdesigns.com" > <table width="478" align="center">
<tr>
<td width="166" style="font-family: 'Letter Gothic Std', 'Lithos Pro Regular', 'Mesquite Std', 'Trebuchet MS'">Name:
</td>
<td width="281">
<input name="name" type="text" required id="name" title="name" size="30">
</td>
</tr>
<tr>
<td>Email:
</td>
<td><input name="email" type="text" required id="email" title="email" size="30"></td>
</tr>
<tr>
<td>Phone:</td>
<td><input name="phone" type="text" id="phone" size="30"></td>
</tr>
<tr>
<td>Subject:</td>
<td><select name="subject" required id="subject" title="subject">
<option value="info">General Information</option>
<option value="web design">Web Design</option>
<option value="hosting">Hosting services</option>
<option value="logo design">Logo Design</option>
</select></td>
</tr>
<tr>
<td>How did you hear of us?</td>
<td>
<label>
<input type="radio" name="how did you hear" value="friend" id="howdidyouhear_0">
friend
</label>
<label>
<input type="radio" name="how did you hear" value="search" id="howdidyouhear_1">
search
</label>
<label>
<input type="radio" name="how did you hear" value="ad" id="howdidyouhear_2">
ad
</label>
</td>
</tr>
<tr>
<td>Message:</td>
<td><textarea name="message" cols="60" rows="15" id="message" title="message">
</textarea>
</td>
</tr>
<tr>
<td><input name="clear" type="image" id="clear" src="clear.png" alt="clear" /></td>
<td>
<input name="submit" type="image" id="submit" src="submit.png" alt="submit" value="send email" />
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</form>
are you dutch? a lot of dutch people have that name ;) )
I think what you're trying to do is send information which is in an input field to your e-mail adress. You can do this using PHP and maybe some other solution, but i dont know them.
For sending the mail with php i would recommend using something like this:
first change the html to:
<form action="mail.php" method="post">
<textarea cols='40' rows='7' name='mailcontent'></textarea>
<input type="submit" value="Submit"/>
</form>
Then create a file called "mail.php" and add this code to it:
<?php
$mail_content = $_POST['mailcontent'];
$mail_subject = "a subject you like, can not be removed."
$mail_to = "suzanne#nielsenwebdesigns.com";
$mail = mail($mail_to, $mail_subject, $mail_content);
if($mail){echo "Success!";}else{echo "Something went wrong, please try again later.";}
?>
or if you just want to let please send a mail themselves i suggest you use this:
Click here to send me a mail
I have the following table code that each row contains a form. My problem is, the bottom row, where the input and submit are, is going to the top above the top table row. I cannot figure out why. Can someone please help and explain why the bottom row goes to the very top?
<table id="bet_table" width=800px cellspacing=0 cellpadding=1 border-width=1px>
<tr bgcolor="BF1919" style="color:#fff; font-weight:bold;">
<td><center>Time</center></td>
<td><center>Game #</center></td>
<td><center>Teams</center></td>
<td><center>Run Line</center></td>
<td><center>Money Line</center></td>
<td><center>Total Runs</center></td>
</tr>
<tr bgcolor="#F0F0F0">
<td colspan=6><center><strong>August 28, 2012</strong></center></td>
</tr>
<tr bgcolor="#fff">
<form action="mlb.php?action=update&gameid=" method="post" />
<td width="130px"><center><input type="text" size="4" name="time" value="7:00" />
<select name="ampm">
<option value="AM">A.M.
<option value="PM">P.M.
</select></center></td>
<td width="60px"><center>306</center></td>
<td>Los Angeles Dodgers<br />Los Angeles Angels</td>
<td width="150px"><center>
<select name="runline1frac">
<option value="-1/2">-1½
<option value="+1/2">+1½
</select> <input type="text" size="4" name="runline1value" value="+120" /><br />
<select name="runline2frac">
<option value="-1/2">-1½
<option value="+1/2">+1½
</select> <input type="text" size="4" name="runline2value" value="-182" /></center></td>
<td width="80px"><center><input type="text" size="4" name="moneyline1value" value="-132" /><br /><input type="text" size="4" name="moneyline2value" value="+132" /></center></td>
<td align=right>Total Runs: <input type="text" size="3" name="totalruns" value="6" /> OV <input type="text" size="4" name="totalrunsOvalue" value="-178" /><br />UN <input type="text" size="4" name="totalrunsUvalue" value="+123" /></td>
</tr>
<tr colspan=6>
<center>
<input type="submit" value="Update" />
</form>
</center>
</tr>
</table>
Pasted your code and fixed it here:
http://jsfiddle.net/5nNxB/
Your last <tr> did not have a <td>. Added it with the right colspan.
As a side note, your code is not very clean. Wrap the entire table in <form> instead of randomly inserting the tags in the middle. Also, try not to use inline styling and attributes like bgcolor etc.
Bottom of your code :
<tr colspan=6>
<center>
<input type="submit" value="Update" />
</form>
</center>
</tr>
Should be:
<tr>
<td colspan=6>
<center>
<input type="submit" value="Update" />
</form>
</center>
</td>
</tr>
The form tag also is placed incorrectly