I have to make a UI of a reciept page, in which I have to print text above the line.
Here is an example image:
The option of showing underline below text by using text-decoration property is not working as it just displays line under the text. I also tried by setting border-bottom of the table but it is not working either.
What I need to do is to draw a lengthy horizontal line and I can print text above it. How can I achieve this desire result?
I need it to be IE > 7 compatible.
Consider using input fields with a border-bottom style declaration. Also, since the fields are meant for display purposes only, you should set them with the readonly attribute, so users cannot alter their contents.
For example:
HTML
<input type="text" value="some text goes here" readonly>
<input type="text" value="another field" readonly>
<input type="text" value="some more" readonly>
<input type="text" value="1234" readonly>
CSS
input {display:block;border:none;border-bottom:1px solid #000;}
See jsFiddle demo
Note the values of the fields should be properly escaped before they are included in the HTML. For example, in PHP the values can be escaped with the htmlspecialchars() or htmlentities() functions.
Related
I have a bit of an odd request. I'm creating a form on WordPress using the plugin Gravity Forms. I would like to add a bullet point to the end of my placeholder. The only way I was able to do this is to put the special HTML character · in the placeholder field on the plugin which is a middle dot. It works, but the dot is pretty small and I would like to increase its size.
Here is what the plugin placeholder field looks like:
I tried to wrap the special character with a <span> with a class so I can edit it in CSS, but when I click save, the plugin automatically removes the <span> tags.
Here is a screenshot on what the plugin spits out on the site:
I would like to make that dot much larger.
Here is the HTML that the plugin spits out:
<input name="input_1" id="input_1_1" type="text" value="" class="medium" placeholder="Name ·">
Does anyone have any suggestions? Maybe some jQuery will work?
Thanks
You can use the password dot (●) or bullet (•) instead.
See the following comparison / examples:
<input type="text" placeholder="middledot ·"/>
<input type="text" placeholder="bullet •"/>
<input type="text" placeholder="password dot ●"/>
i need to add font-icon inside input field so i used this method
<input type="text" name="your name" placeholder=" YOUR NAME" style="font-family:Flaticon" class="restrict">
as you see placeholder=" YOUR NAME" this display font-icon but my problem is when user types some text place holder disapper so i need font icon to be placed permanent inside input field like <lable>
can someone help me
You can't. What do you expect it to look like? placeholder disappears by design.
If you want to prefix an icon in front of your input field, put them together in a container, give this container the needed style and put there your icon and your input-tag. That's the way, how bootstrap your problem solves.
Shortened example:
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
Of course, you need CSS.
I am new to html. This is a very simple question. I am dealing with forms. I want all the input text fields to start at the same x-axis point regardless of the size of the label. I want the labels to be left aligned and all the text fields to start at the same x-axis point.I don't want to use tables or " ". Is there a simple solution or Should I use separate divisions for labels and input fields? I don't mind using css but I prefer it to be simple.
<form>
<label>Name</label>
<input type="text" name="n1"><br>
<label>Phone No.</label>
<input type="text" name="p1">
</form>
I want "n1" and "p1" to start at the same x-axis point.
Add this style to your page:
label{
display:inline-block;
min-width:80px
}
Check here Fiddle
You can use paragraph tags for every input element.
<p><input type="text" name="your name"></p>
<p><input type="email" name="your email"></p>
In html for textbox it can be hidden by using <input type="hidden" name="hide"/> but for TextArea if I want to hide how should I use?
Anyone help me please,
Thanks,
Set CSS display to none for textarea
<textarea name="hide" style="display:none;"></textarea>
An <input type=hidden> element is not a hidden input box. It is simply a form field that has a value set via markup or via scripting, not via user input. You can use it for multi-line data too, e.g.
<input type=hidden name=stuff value=
"Hello
world, how
are you?">
If the value contains the Ascii quotation mark ("), then, as for any HTML attribute, you need to use Ascii apostrophes (') as attribute value delimites or escape the quote as ", e.g.
<input type=hidden name=stuff value="A "funny" example">
but is the css style tag the correct way to get cross browser compatibility?
<textarea style="display:none;" ></textarea>
or
what I learned long ago....
<textarea hidden ></textarea>
or
the global hidden element method:
<textarea hidden="hidden" ></textarea>
<textarea name="hide" style="display:none;"></textarea>
This sets the css display property to none, which prevents the browser from rendering the textarea.
use
textarea{
visibility:hidden;
}
I have a simple form with two hidden inputs that is causing extra white space in Firefox. I've been in trouble with this for few days.
<form name="DemoForm" method="get">
<input type="hidden" name="isposted" value="">
<input type="hidden" value="2" id="SelectedTab" name="SelectedTab"></form>
It is rendered in cell. After that, there is a div with content, but in firefox there is a extra white space above the div. Only in Firefox.
I try to fix this putting the form in a div with display:none, its elements in div with "dispay:none" and other things that I have found in the net, but nothing help...
Has anyone met this issue before?
I have fix this issue using div container with "display:none" but removing the "type:hidden" from each element.
The final code looks as follows:
<div style="display:none">
<form name="DemoForm" method="get">
<input name="isposted" value="">
<input value="2" id="SelectedTab" name="SelectedTab">
</form>
</div>
Sure, this could be useful for someone. :- ]
Try removing all white spaces and newline characters within the form, like this:
<form name="DemoForm" method="get"><input type="hidden" name="isposted" value=""><input type="hidden" value="2" id="SelectedTab" name="SelectedTab"></form>
Similar idea to gotqn.
Make data field intended to be hidden an ordinary text field.
Just "hide" the input field by making it the same background-color as the form background.
If you want to hide the field data, use a text color the same as the background.
If you want to display some message/number in it, use a text color that is contrastingly different.