How do I move text to a new line in an HTML input element with the type="button" attribute?
I have following code:
<input type="button" id="btnTexWrapped" value="I see this is a long sentence here." style="width: 200px;" />
I want the button's text value to be wrapped in two lines. I tried typing it into the next line in HTML. It didn't work as I expected:
<input type="button" id="btnTexWrapped" value="I see this is a long
sentence here." style="width: 200px;" />
I also tried using all options of white-space with fixed width: 200px;, but still nothing works.
I am OK with statically fixing the length, width, or other values: as the control is not going to change.
white-space: normal;
should work
Try this, you can see how it works instantly:
<input type="button" value="Carriage
return
separators" style="text-align:center;">
You can use button tag
<button> I see this <br/>is a long <br/> sentence
here.</button>
For anyone reading this question 4 years later, I would like to add some clarifying details. Lokesh's answer is the correct one (not the accepted answer), but the initial question is based on a misunderstanding of how HTML works, which no one has addressed.
HTML is not a white-space significant language. That is, any new lines are completely ignored by the browser. While you can (and should!) put new lines in your HTML code in order to write readable, maintainable HTML, it will (almost) never affect the end result (I won't get into exceptions here).
As Lokesh indicated, you can use the <br /> tag to force a new line. Another common way is to use block level elements, such as div or section.
A number of elements are set to block by the browser UA stylesheet. They are usually container elements, like <div>, <section>, and <ul>. Also text "blocks" like <p> and <h1>. Block level elements do not sit inline but break past them. By default (without setting a width) they take up as much horizontal space as they can.
This is a quote from https://css-tricks.com/almanac/properties/d/display/, which is a very good reference on the different properties for the display attribute.
Additionally, I don't recommend trying to use any of the other suggested solutions which require putting encoded newline symbols inside the value attribute. This is pushing the input tag beyond was it was designed for. If you need more complex content for a button, the button tag is more appropriate. In fact, I generally don't think there's ever good reason to use <input type="button"> instead the button tag. It's much more semantic, easier to read, and is infinitely more flexible - for example, in allowing breaks and other elements (such as images!) inside it.
Just a bit of knowledge and a few recommendations from a professional web developer... :)
I had come cross type of requirement in my one of the project,i resolved like given below.
use html encoding string
<input button type="submit" value="This is button
two line text" />
for splitting the text in value attribute of the button tag
Hope this will help you..
Just press enter in the middle of the value, like this:
<input type="button" id="btnTexWrapped" value="I see this is a long
sentence here." style="width:200px;"/>
I
Related
I have updated it. let me make it more clear
<input type="text" value='<div>hello</div><strong>'/>good day
what I have got
input box having default value as <div>hello</div><strong> inside it and the text following the input good day does not inherit the strong tag it looks normal font size and it is not interpreted by browser and this is what i want.
http://jsfiddle.net/UrGpC/3/ This is what i really want to be but does it work in all browsers ?
The browser does not treat the html tags which are inside the input value as the normal flow of html tags from my experiment or does it interpret them ?
You should try and see, it doesn't interpret it as an element, it get rendered as plain text, try loading jQuery and change it thru it:
$('#test').html("ok");
http://jsfiddle.net/nd87/UrGpC/
Next time you should Test it and explain what you have tried
Well you can try this:
<input type="text" value="<div>hello</div><strong>" />
PD: You forgot to close the value atributte :P
EDIT:
It's works for me, is so strange... Anyway if it doesn't work you can try & lt; and & gt; method.
<div>hello</div>
As Wesley Murch said. ;)
I tried to do this recently, but gave up. According to this: http://www.w3.org/TR/html4/interact/forms.html#adef-value-INPUT, input value is CDATA, which seems to mean basically only ordinary characters can be included. http://en.wikipedia.org/wiki/CDATA
I'm currently wondering when to use clean text (not wrapped inside eg. <p> tags) in html documents.
i have a input fiels which i want some text before like:
<p>Age:</p> <input type="text" name="age">
But using the p tags as above will result in a linebreak between the two. However if I leave out the p tags this problem is no more.
My question is then wether it is OK to leave out the tags, and what in is interpreted as,
Thanks
You are looking for the <label> tag
Though there are many solutions as Webarto said you can style the p tag, or you can use span or label...People usually use label..I'll tell you why..
In good web designing principles one thing comes very important..
If you have some checkbox, or radiobutton, or textfield anything in your form then it should be selected just by clicking on the label assosiated with it..User should not search for the
radiobutton and then click, as it is very small, it should be triggered just by clicking the label, user should not search for the textfield and then click inside it and then type..
<label for="id of input element"> attribute provides that function
Hence people prefer
<label>
The p element means in principle a paragraph, though HTML5 (and common practice) takes a liberal position on this: a “paragraph” is any block of text. But even under that interpretation, there is no reason to use p markup for a field label, as you do not want the label to appear in a block of its own. You might use p markup around the label and the corresponding input field, as in
<p><label for=age>Age:</label> <input type=text name=age id=age></p>
The reason is that you probably want to present such constructs as blocks, not consecutively all on one line. But then you need to remember that p markup implies default margins, corresponding to an empty line above and below. You can remove then using CSS, but a simpler and somewhat more logical approach is perhaps to use div, which indicates a block but with no default margins;
<div><label for=age>Age:</label> <input type=text name=age id=age></div>
I just read the following at http://w3fools.com/#html_forms:
Non-block-level elements (such as <input>) are not valid directly inside <form> tags until HTML5.
I had never heard of anything along these lines, and every basic HTML tutorial I've seen seems to be just fine with putting input tags directly inside a form tag. So my question has three parts:
Is the above statement legitimate?
Why is this the case? (Was it simply an oversight, or were the creators of the HTML spec trying to prevent specific problems by creating this rule?)
What is the recommended way to construct a form with inputs? (Are we just supposed to create a div or a table directly inside the form tag?)
It's standards pedantics.
The statement is legitimate as far as the standard goes: in HTML 4.01, the definition for <form> specifies that it may only contain block elements or <script>. As far as what every browser in the world allows, it's fine.
I can only guess that they consider <form> to not be a layout tag at all, and they want all inline elements to be contained inside a block element.
Yes, you're supposed to place a <div>, <table>, <p>, or some other block presentational element inside the <form>.
The above statement is true. In HTML the <input> tag is not a valid element of the <form> tag. In order to make this validate, you need to enclose the <input> tag with either a <fieldset> or <div>. Which is demonstrated below.
<form action="/" method="post">
<fieldset>
Field: <input type="text" name="field" />
<br />
<input type="submit" value="Submit" />
</fieldset>
</form>
First of all I'd like to mention that it's not really surprising that HTML tutorials teach you to do things wrong – HTML was practically designed to accept any and every way of doing things. You can leave tags unclosed, you can nest them improperly and whatnot, which is one of the reasons I personally use XHTML.
That statement seems to be true, but because of how HTML is designed, it does not matter in practise. XHTML probably prohibits this.
Form isn't really a container of any sort. It seems like the creators of the HTML spec were fond of things like block-level elements you should wrap everything inside of. This is just my view on it, though, but as far as I've noticed, non-block-level elements shouldn't be used without a proper container for them.
It's exactly like you shouldn't put non-block-level elements in a <blockquote>. Block-level-elements are containers for other elements.
A div, a table – I think even a <p> does the thing here.
Well, according to the HTML 4.01 specification (specifically section 17.3), this is technically true. However, I don't know of any web browser that would actually give you a problem over it.
I'm using django-uni-form to style my form using the filter my_form|as_uni_form:
<form class="uniForm" id="my_form" method="post" action="./">
<fieldset class="inlineLabels">
{{ my_form|as_uni_form }}
<div class="form_block">
<input type="submit" value="Submit"/>
</div>
</fieldset>
</form>
It looks really good. But I need to customize it.
For example, one of the field "percentage" of the form is of the type IntegerField. It is being rendered as an <input type="text">. The problem is that the text box is really wide, I'd like to make it only 2 character wide. Also I want to add a percentage sign "%" right after the text box so that users know they if they put in the number "10" in the text box, it means 10%.
Is there anyway to do that with django-uni-form?
Thanks for your help.
You'll need to loop over the elements of your form and render the uniForm markup yourself. Either that, you can customize the look of each input based on an id or class.
What I'd do is look at the mark up it generates, and then loop over the elements generating that same markup and customize them. See the Django docs for more information.
I have the same question as yours. I think the length of the text input is easy to change via css. I'm more concerned about the custom html element behind the input, in your case percentage mark. I don't find an easy solution to it. Looks like either we have to mimick the way a field is rendered in django-uni-form template or write a filter of our own. I'm still waiting for a more elegant solution.
So far I mostly put labels and inputs inside a dedicated paragraph tag :
<p>
<label for="myInput">Blah</label>
<input type="text" ... />
</p>
But this tag is made for text paragraph. Is is semantically right to use it this way ? Should a div be used ?
Semantically, no, it is not correct. Your form inputs are not paragraphs in any sense of the word.
If you're a CSS expert, try using <ol> and <li> tags and restyling them to look how you like, since your form fields are an ordered list of items. See A List Apart's article on Prettier Accessible Forms for an example of the HTML and CSS necessary for this format.
You seem to have nearly answered your first question, in that it is semantically not a paragraph, so the use of <p> is -to me- wrong.
The second question of whether or not to use a <div> depends on your useage, but I don't see why not, other than the increasingly bulky code, though that'll probably not add much weight to the page.
My own tendency is to nest the <input /> within the <label> tag, though this is, again, semantically incorrect since the input is not a part of the label, being only its counterpart.
Of course, both ways work and produce much the same visual effect; I've never used an alternative -speech-converter or such- to a GUI browser, so I can't say if it adds weirdness for disabled users.