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!
Related
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.
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.
I have a simple password change form as below. It's part of a larger page, but this snippet serves to illustrate. There's no user identifier in this form - no login name, ID or other reference. It's not required because that information is stored as part of the session data on the server and picked up there when this form is submitted by an AJAX call.
<div id="passwordChange" >
<form id="passwordForm">
<table class="formbox dropshadow">
<thead>
<tr>
<td colspan="2">Change Password</td>
</tr>
</thead>
<tbody>
<tr>
<td><label for="currentPassword">Current Password</label></td>
<td><input id="currentPassword" name="oldPassword" type="password" required pattern=".{5,20}" title="Passwords should be between 5 and 20 characters long"></td>
</tr>
<tr>
<td><label for="newPassword">New Password</label></td>
<td><input id="newPassword" name="newPassword" type="password" required pattern=".{5,20}" title="Passwords should be between 5 and 20 characters long"></td>
</tr>
<tr>
<td><label for="confirmPassword">Confirm Password</label></td>
<td><input id="confirmPassword" name="confirmPassword" type="password" required pattern=".{5,20}" title="Passwords should be between 5 and 20 characters long"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan=2>
<input type="hidden" name="cmd" value="setPassword">
<input type=submit name=submit value="Change Password">
<input type=button name=cancel value="Cancel">
</td>
</tr>
</tfoot>
</table>
</form>
</div>
If I enter a password that Firefox has already stored for the domain in the first password box, and Firefox has stored that password for more than one stored user I get this box pop-up when I click Change Password:
The thing is, I might not be changing the password for any of the listed users, but I can't proceed past this point without giving Firefox an answer. This makes it impossible to change the password for a user whose password is not stored by the Firefox password manager.
Now, there may be a configuration option to enable or disable this behaviour (I'd be pleased to hear about it) but that's only good for my computer.
I want to be able to disable this behaviour as part of the page so that my customers don't run up against it.
Is there some HTML tag or attribute I can use? Is there a Javascript hack, or just a structural change I can make to the form that stops this occurring?
FWIW I'm running Firefox 37.0.2
After grappling with this for a while, I tried adding the autocomplete="off" attribute to my form. With this <input>, lo and behold, no interference from the password manager:
<input autocomplete="off" id="currentPassword" name="oldPassword" type="password" required pattern=".{5,20}" title="Passwords should be between 5 and 20 characters long">
Now, this flies in the face of the bug report referred to by Daniel A. White (see above) and notes on web pages such as this, both of which suggest that the ability to turn off autocomplete is being removed from the browser. Perhaps it is, but it seems that it doesn't apply here, which is all I am concerned about.
(The separate argument about whether browser manufacturers should be unilaterally overriding the wishes of the site designers is a debate for another place and time).
Footnote: While fiddling with this I did something that should have been obvious, but wasn't intuitive: I clicked the red X and closed the window. Password manager disappeared without updating anything and everything was as I wished. I still feel that a 'None of the Above' button, or 'Not Now' or whatever would have been friendlier.
There is no HTML tag or attribute that can accomplish that.
This is Browser specific, not webpage manipulation.
I am creating a very large web form and I want the input boxes to autocomplete. I use a table within the form to hold all of the input boxes. My code has this general structure:
<form method="get" autocomplete="on">
<table>
<tr>
<td>Label:</td>
<td><input type="text" name="unique_relevant_name"></td>
</tr>
<tr>
<td>Label:</td>
<td><input type="text" name="unique_relevant_name"></td>
</tr>
</table>
<table>
<tr>
<td>Label:</td>
<td><input type="text" name="unique_relevant_name"></td>
</tr>
</table>
</form>
I need the table structure because it organizes the page in a specific way using CSS. The autocomplete works well for around 200 input boxes. However, when I add an additional input box at a certain point (let's say the 201st input box), it stops working. In other words, no new entries are saved and included in the autocomplete when I submit the form, as they are when they're working correctly. Even in input boxes that were working once before, stop working. Once I delete this new entry, it goes back to normal. I really don't think it's a syntax error because I am literally copying and pasting working code and then it doesn't work. Therefore, I'm trying to learn more about the autocomplete... is there a limit to how many input boxes it can work with? I am thinking about switching to JavaScript options but I want to know why this won't work.
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>