Add form to table rows - html

Which is a valid way (if any) to add a form to table rows?
I have the following situation:
<table>
<tr>
<td><input type="text" name="q"></td>
<td><input type="text" name="a"></td>
<td><input type="submit" name="submit" value="Submit"></td>
</tr>
<tr>
<td><input type="text" name="q"></td>
<td><input type="text" name="a"></td>
<td><input type="submit" name="submit" value="Submit"></td>
</tr>
<tr>
<td><input type="text" name="q"></td>
<td><input type="text" name="a"></td>
<td><input type="submit" name="submit" value="Submit"></td>
</tr>
</table>
How can I add a form element and still have valid HTML?
<table>
<form>
<tr>
<td><input type="text" name="q"></td>
<td><input type="text" name="a"></td>
<td><input type="submit" name="submit" value="Submit"></td>
</tr>
</form>
</table>
Is invalid (at least I think it is)

Wrap your table inside the form element:
<form action="/" name="form1">
<table>...</table>
</form>
But even better: Build your form without tables if possible.

Tables and forms are separate concepts in HTML. People sometimes confuse them with each other. The conceptual confusion is often accompanied with confused markup. On the other hand, tables and forms can be "mixed" in a sense. Specifically, you can put a table inside a form or vice versa, and it is often useful to do so. But you need to understand what you are doing.
Tables and forms can be nested either way. But if you put forms into tables, each form must be completely included into a single table cell (one TD element in practice). Thereby the forms are each completely independent.
AFAIK It is valid to use tables in order to format the form.

<form action="/" name="form1">
<table>
<tr>
<td><input type="text" name="q"></td>
<td><input type="text" name="a"></td>
<td><input type="submit" name="submit" value="Submit"></td>
</tr>
<tr>
<td><input type="text" name="q"></td>
<td><input type="text" name="a"></td>
<td><input type="submit" name="submit" value="Submit"></td>
</tr>
<tr>
<td><input type="text" name="q"></td>
<td><input type="text" name="a"></td>
<td><input type="submit" name="submit" value="Submit"></td>
</tr>
</table>
</form>
or
<table>
<tr>
<td colspan="2"> <form action="/" name="form1"></td>
</tr>
<tr>
<td><input type="text" name="q"></td>
<td><input type="text" name="a"></td>
<td><input type="submit" name="submit" value="Submit"></td>
</tr>
<tr><td colspan="2"> </form></td></tr>
......
</table>

Related

ASP.NET MVC HTML How can I create a button that changes the form, not submitting 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.

How to Insert multiple Records from HTML Table Rows

The following HTML Code displays input fields for Single Record and provides for saving this Single Record to the Database
<html>
<body>
<form method="post" action="demo_add.asp">
<table>
<tr>
<td>CustomerID:</td>
<td><input name="custid"></td>
</tr><tr>
<td>Company Name:</td>
<td><input name="compname"></td>
</tr><tr>
<td>Contact Name:</td>
<td><input name="contname"></td>
</tr><tr>
<td>Address:</td>
<td><input name="address"></td>
</tr><tr>
<td>City:</td>
<td><input name="city"></td>
</tr><tr>
<td>Postal Code:</td>
<td><input name="postcode"></td>
</tr><tr>
<td>Country:</td>
<td><input name="country"></td>
</tr>
</table>
<br>
<input type="submit" value="Add New">
<input type="reset" value="Cancel">
</form>
</body>
</html>
How is possible to save multiple such records in One Operation?

Except Line Break in Input Text Fieldset

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

Issue with validator

My code, HTML 4.01 Transitional:
<table cellspacing="0" cellpadding="0" border="0" class="forms" id="form-control-number">
<tr>
<td colspan="6" align="right">
<span class="nadpis">Pole pro 14 pozic (*)</span>
</td>
</tr>
<form action="">
<tr>
<td><label class="required" for="numero">GTIN-8</label></td>
<td><INPUT id="numero" class="middle" TYPE="text" NAME=numero SIZE=17 MAXLENGTH=7></td>
<td><INPUT class="text-small" TYPE="text" NAME=cc SIZE=1 READONLY></td>
<td><INPUT class="submit" TYPE="submit" VALUE="Vypočti" ONCLICK="ccc8(this.form); return false;"></td>
<td class="reset-col"><INPUT class="submit" TYPE="reset" VALUE="Vymaž"></td>
<td><INPUT class="text" TYPE="text" NAME=chiffre SIZE=14 MAXLENGTH=14 READONLY><span class="hidden-desktop hidden-tablet">Pole pro 14 pozic (*)</span></td>
</tr>
</form>
<form action="">
<tr>
<td><label class="required" for="numero2">GTIN-12</label></td>
<td><INPUT id="numero2" class="middle" TYPE="text" NAME=numero SIZE=17 MAXLENGTH=11></td>
<td><INPUT class="text-small" TYPE="text" NAME=cc SIZE=1 READONLY></td>
<td><INPUT class="submit" TYPE="submit" VALUE="Vypočti" ONCLICK="ccc12(this.form); return false;"></td>
<td class="reset-col"><INPUT class="submit" TYPE="reset" VALUE="Vymaž"></td>
<td><INPUT class="text" TYPE="text" NAME=chiffre SIZE=14 MAXLENGTH=14 READONLY><span class="hidden-desktop hidden-tablet">Pole pro 14 pozic (*)</span></td>
</tr>
</form>
</table>
The validator is writing: document type does not allow element "FORM" here (line 7)
document type does not allow element "TR" here (line 8)
Does anyone know why this error is happening?
You can't add a form element as a direct child of a <table> or <tr> element. Try surrounding the <table> with your <form>.

resizing the background color of a form

if you try my code below you can see that the background color is light blue and it occupies the whole page of a site, I want to resize it how can you do that? I mean that the color will fit to the same size where the fill up boxes are,
do i need to add this code: width="60%"
can you please tell me where can I add this? Thanks
<html>
<div style="color:red">[+validationmessage+]</div>
<p style="color:#4C4C4C;font-weight:bold">« You can subscribe here: »</p>
<p>[+MailChimp.message+]</p>
<div style="background-color:#CCDFED">
<form method="post" action="[~[*id*]~]">
<br/>
<table>
<tr>
<td><label style="margin:0.5em"> Email: </label></td>
<td><input type="text" name="mc_EMAIL" size="60"
maxlength="60" style="margin:0.1em" value="" /></td>
</tr>
<tr>
<td><label style="margin:0.5em"> Name: </label></td>
<td><input type="text" name="mc_FNAME" size="60"
maxlength="60" style="margin:0.1em" value="" /></td>
</tr>
<tr>
<td><label style="margin:0.5em"> Last Name: </label></td>
<td><input type="text" name="mc_LNAME" size="60"
maxlength="60" style="margin:0.1em" value="" /></td>
</tr>
<tr>
<td><label style="margin:0.5em"> Website: </label></td>
<td><input type="text" name="mc_URL" size="60" maxlength="60"
style="margin:0.1em" value="" /></td>
</tr>
<tr>
<td><label style="margin:0.5em"> </label></td>
<td><input type="submit" name="subscribe" size="60"
maxlength="60" value="Register" /></td>
</tr>
</table>
</form>
<p><br/></p>
</div>
</html>
Try this:
<form method="post" action="[~[*id*]~]" style="display:inline-block;background-color:#CCDFEF">
Remove the <div style="background-color:#CCDFED"> before the form and </div> after it.