I am developing a django/html application where I have a table of data. I have to make a way for my users to delete multiple rows in a table. Therefore, I have decided to add checkboxes in a list.
I know that I can include it as
<tr>
<td><input type="radio" name="item1" /></td>
<td>Item1</td>
</tr>
<tr>
<td><input type="radio" name="item2" /></td>
<td>Item2</td>
</tr>
for each item. Then in the end, I can add:
<input type="submit" name="delete" value="Delete Items" />
But this will mean that I will have to enclose my list within a <form></form>
Is this an ethical way of doing it?
I want to add this feature to my site but I also want to do it in the most professional way. Can anyone tell me if I am going in the right direction?
Since you use Django, one way would be to take advantage of what Django provides for forms.
Here are the examples from the official doc, for version 1.10:
-for the radio buttons:
https://docs.djangoproject.com/en/1.10/ref/forms/widgets/#widgets-inheriting-from-the-select-widget
-for the form:
https://docs.djangoproject.com/en/1.10/topics/forms/#building-a-form-in-django
A django form uses the form tag.
Related
I'm new to Gatling and have to design a performance test. I need to login with several users, who each have different possibilities to choose from. Each possibility has the option to choose it or not and looks somewhat like this in the HTML-Code (simplified)
<input type="radio" name="Name123" value="1" checked="checked" class="uebernehmen">
I need to give the Element under name in formParam in the script. In this case, that is Name123. Like I said, the possibilities are different for each user and each possibility has a different value under name. Is there any way to get that value from the first possibility in the form?
It might be important to say, that if not obvious already, this is just a part of a form and there are various of these, packed in more HTML. One of these elements inside the form would look like this.
<tr>
<tbody class="tagcontent" id="ID"><tr id="ID" class="kurs" >
<td>
<input type="radio" name="Name123" value="1" class="uebernehmen">
</td>
<td>
<input type="radio" name="Name123" value="2" class="abwaehlen">
</td>
</tbody>
</tr>
In addition there is following block at the beginning of the form, where I need to extract the value of PersonID and AccountID, is that possible too?
<input type="hidden" name="PersonID" value="IDP">
<input type="hidden" name="AccountID" value="IDA">
Thanks in advance!
Use a CSS selector check like demoed in the tutorial and in the Gatling Academy.
Basically, I have a table with inputs inside a form tag, that are required by user to fill in.
When I test it, the form is working, but only when there is one row in a table. With two an more rows, a required attribute is not working.
I've written a simple example
This works, click enter inside input field to see.
<form>
<table>
<tr>
<td>
<input type="text" name="usrname" required>
</td>
</tr>
</table>
</form>
<br>
This doesn't work, click enter inside input field to see.
<form>
<table>
<tr>
<td>
<input type="text" name="usrname" required>
</td>
</tr>
<tr>
<td>
<input type="text" name="surname" required>
</td>
</tr>
</table>
</form>
That's because forms with more than one text input aren't submitted by hitting enter. Try adding a submit button to both forms and you'll see it works fine.
In your example, is that supposed to be two identical fields in the different cells (and one of them is just misspelled)? If so, that's likely your problem. If they are intended to be two separate fields, it should work, but I'd need to see a more real-world example.
Also, I'd highly recommend using CSS to format/style your form. If that sounds intimidating, try Bootstrap--it makes creating pretty forms extremely easy.
This is a follow up question to How to build a 2 column view in bootstrap with large textarea on top.
I appreciated the answers, but I am not experienced with HTML so I need to ask a basic question here: I am trying to make a view ( which I will populate from a DB ), not a form. Should I be using input elements or some other html element? I don't want the view fields to be changeable by the user. Again I will likely be trying to make a table like so:
<textarea rows="2" cols="30">
</textarea>
<table border="none">
<tr>
<td><input type="text" name="field1" /></td>
<td><input type="text" name="field2" /></td>
</tr>
<tr>
<td><input type="text" name="field3" /></td>
<td><input type="text" name="field4" /></td>
</tr>
</table>
Thanks in advance ,
Bill
If I understood you correctly, you want to load some data from database like (user details or what so ever) and you want to display it to user but dont want it modify it?
So basically, use forms when you want user to add new information or edit existing one, you could also disable inputs if you dont want to let him edit them - but IMHO this is really confusing design approach most of the times for users - at least I would not prefer it when you are going to disable full page of inputs :)
When you actually want to show something to user like plain text you use paragraphs <p>Some text here</p> etc. I suspect you have started to learn to use HTML via twitter bootstrap and are bit confused.
To get started with HTML I suggest that you will go through all chapters of this tutorial https://developer.mozilla.org/en-US/docs/HTML
After playing around with that tutorial and examples, get back to twitter bootstrap so it could open up for you bit better, good luck!
Don't know a better title but here is what im trying to do.
I have the following form where which will display a list of books and after every book entry there is a remove button. The list can be any length. In order to get the book id I have set name="remove[${cartItem.bookId}]" but how do I get this value in a servlet? request.getParameter("remove") and request.getParameterValues("remove") returns null everytime.
<form method="post" action="removeBookFromCart">
<c:forEach var="cartItem" items="${sessionScope.cart.cartItems}">
<tr>
<td><c:out value="${cartItem.title}" /></td>
<td><input type="submit" name="remove[${cartItem.bookId}]" value="Remove"/></td>
</tr>
</c:forEach>
</form>
There are several solutions:
Use <button name="bookToRemove" value="${cartItem.bookId}" type="submit">Remove</button>. This, however, doesn't work as specified in IE6 and IE7 (at least).
Iterate through the parameters, find the one which starts with remove[, and extract the ID after that. You could use a simpler name, such as remove_${cartItem.bookId}
Create one form per cart item, instead of a global form, and use a hidden field to contain the book to remove.
The third way is probably the easiest one.
You could also use some JavaScript to initialize the value of a hidden field when a button is clicked, but this is not easier than the methods above, and requires JavaScript.
You have to use hidden parameters:
<input type="hidden" name="remove" value="${cartItem.bookId}"/>
Let the submit button be just this way:
<input type="submit" value="Remove"/>
EDIT:
Yes, you have to create a form element for each book:
<c:forEach var="cartItem" items="${sessionScope.cart.cartItems}">
<tr>
<td><c:out value="${cartItem.title}" /></td>
<td>
<form method="post" action="removeBookFromCart">
<input type="submit" value="Remove"/>
<input type="hidden" name="remove" value="${cartItem.bookId}"/>
</form>
</td>
</tr>
</c:forEach>
For a standard "add item" form page it is desirable to have two submit buttons: an "OK" button and a "cancel" button, where the former POSTs the form to one URL, and the latter GETs some other URL.
This obviously means that two separate FORMs are needed, and, if laid out with tables, the markup would go as follows:
<form action="add.html" method="post">
<table>
<tr>
<td>Enter data:</td><td><input type="text" name="data"/></td>
</tr>
</table>
<input type="submit" value="OK"/>
</form>
<form action="index.html" method="get">
<input type="submit" value="Cancel"/>
</form>
However, this would result in the two buttons being placed below each other. It would be desirable to have them placed side by side. The following works:
<form action="add.html" method="post">
<table>
<tr>
<td>Enter data:</td><td><input type="text" name="data"/></td>
</tr>
<tr>
<td><input type="submit" value="OK"/></td>
</form>
<form action="index.html" method="get">
<td><input type="submit" value="Cancel"/></td>
</tr>
</table>
</form>
But although I've seen it used on commercial websites, I guess it's not quite legal HTML.
So thus:
1) Since the second methods works, are there any good reasons for not using it?
2) Are there any better solutions?
EDIT: This was a silly question. The second method is unnecessary. Solution: add to the first method a CSS rule of:
form
{
display: inline;
}
You broke my mind.
There are many and varied problems with what you have here, but I'll start by pointing out that Cancel/Reset are not considered good things generally.
I'll follow that by pointing out that you could use CSS to style the buttons side by side in your first example, and follow that by pointing out that a simple type="button" could have any arbitrary script attached to it to do your cancel navigation, and follow that by the fact a simple anchor tag would be even more straightforward.
And I'm not going to mention the table, because that'll just start some trouble.
Don't use a second form. Wrap both buttons in the same form, and do something like this with the cancel button:
<input type="button" text="Cancel"
onclick="document.location.href='index.html';return false;" />
1) When you create a page using "legal HTML," you can have an expectation that what works in today's browsers will work in tomorrow's browsers, or in some other user agents that you might not have checked the site in. But in the example you've given, the degree to which different browsers agree on how to "fix" the HTML for display is much less certain. It adds a level of predictability to the how the page will display when "valid HTML" is used. Plus, who knows how a user agent such as a screenreader would describe the code in question.
2) Is using a regular anchor tag an option?
<td><input type="submit" value="OK"/></td>
<td> or Cancel</td>
Or you could use CSS to move a second form and its submit button up into the first form, but the specifics of this might be tricky.
Add a row to your table
<tr>
<td><input type="button" value="Cancel" onClick="window.location='./index.html'"/></td>
<td><input type="submit" value="OK" name="submit"/></td>
<tr>