Hi i would like to know how to change the text box in HTML to just a line rather than a box because i am trying to make a webpage look like a PDF form and for a neat outlook i would like to change the text box design to just a long line so the user can type his name or whatever the field requires him to do..
You'll probably want a more specific selector, but this should make a reasonable starting point:
input {
border-style: none;
border-bottom: solid black 1px;
}
You mean to display a <textarea> as an <input type="text">?
In html, i assume, via <textarea cols="" rows="1"> or via CSS styling the width and height of the element
For single lines of input, I'd use a <input type="text" />, which actually is the default type and can be abbreviated to just <input /> (I'm assuming xhtml in these examples).
Related
I'm writing a "Natural Language" form like this one and therefore I include the <input> tags right inside the text like this:
<h3>I am <input type="number" /> years old.</h3
I'd like to know if there is an easy way to set the font-size of this input to be the same as the text (in this case h3)? That way I could include it inside h1's, h2's, etc. without worrying about font-size.
The main reason being that I use Bootstrap for my typography, and it does a lot of magic which I'd want to automagically apply to my input.
You can use font-size:inherit; to make the font size match it's parent.
HTML
<h3>I am <input class="inherit" type="number" /> years old.</h3>
CSS
.inherit {
font-size: inherit;
}
Here is a fiddle of it in action: https://jsfiddle.net/uyxr7zm0/
I have a textarea that will hold data from a database. It will be disabled so that the user cannot interact with it.
Is there a way to set the height via css so that it fits the area. IE: if there is only one line of text, the textarea height is only 1 row or if there is 3 lines of text, the textarea height is 3 rows?
It's part of an MVC application if that helps at all. I'm using the html.textareafor as well.
Simplest I can think of is this:
Working Fiddle
div {
display:inline-block;
border: solid 1px #000;
min-height:10px;
width: 300px;
}
More Options:
Textarea Auto height
Textarea to resize based on content length
More Smart Solution Of Mine depends On Count of Chars :) PHP Laravel
<textarea class="form-control" name="description" id="description" style="height: {{(strlen($sectionItem->description)/4).'px'}}">{{$sectionItem->description}}</textarea>
I do i similar in PHP but i use the rows and not the CSS Attribute:
<textarea class="form-control" type="text" rows="<?= strlen($sometext)/50 ?>" readonly> <?= strip_tags(nl2br($sometext)) ?></textarea>
I have spent the last hour reading sites, mostly SO, to find the answer to how to display HTML code on a page without it executing.
The best answer I found was to put it in a textarea, but the textarea did not expand vertically to show the entire contents. style='height:auto;' and style='height:fit-content;' did nothing.
So, my solution was (so simple it surprised me) - count lines (using '\n', the linefeed character in my text):
<?php $lines = substr_count($HTML,"\n"); ?>
<textarea style="border:none;width:100%;" rows="<?=$lines?>" ><?=$HTML?></textarea>
height is now perfect! Add disabled to textarea if you don't want it editable.
I have see some cool effects that put two text input fields in one as a form! I have attached an image for you to see so you know what I mean. Does anyone know how to create such a thing?
Can it be done with CSS?
You can style it up like so - http://jsbin.com/adalot/1/
This should set you off in the right direction
<div id='holder'>
A :<input type='text' id='field1'/>
B: <input type='text' id='field1'/>
</div>
#holder {border: solid 1px red; width: 400px; background-color: white;}
input {border: none;}
input:focus{outline:none;}
It's css .. there is no way to marry 2 distinct <input> into one.
What you saw on the image is a styled <div> containing 2 <input> witch are 'styleless'
test this
table with 4 columns set grouping to rows
and inside insert 2 text box with display style set to none in javascript in any event also with 2 label
and another table with the submit button
A little new to html so if further explanation is necessary or this question just doesn't make sense please feel free to say so.
I am using div to layout a webform I am designing and using the   to move text within a div doesnt always produce the result I want as far as the layout of the page.
I started experimenting and by using:
<span style="margin-left:(variable)px"></span>
i am able to move the text exactly where I want it.
My question is this, is this a bad practice? is there a better way to do what I am trying to do, or a more conventional way? Or even something built into html that I just have not discovered yet.
Thank you
* Added Block of code to show what i am trying to accomplish
Complainant's Address
<input type="text" size="50" id="complainantAddress"/>
<span style="margin-left:3px"></span>
City
<input type="text" name="city" maxlength="15" size="15"/>
<span style="margin-left:16px"></span>
State
</div>
Using non breakable spaces for layout/positioning is bad practice.
What you are trying to do with style attributes is better, but inline-style attributes are often considered as bad pratice, too.
Style attributes are hard to maintain and you duplicate lots of information etc. In addition this styling has the highest specificity and cannot be overwritten by other styles (like user CSS files). They should be used with caution.
Use CSS attributes margin, padding and text-align for this.
Sample
http://jsfiddle.net/UYUA7/
HTML
Text<br />
Text <!-- Do NOT use this -->
<div class="center">Center</div>
<div class="right">Right</div>
<div class="indent">Indented</div>
CSS
.center {
text-align: center;
}
.right {
text-align: right;
}
.indent {
margin-left: 20px;
}
What you're doing is actually a better way to do spacing, than relying on  s. This will give you a much greater flexibility in the long-term and allow you to make changes quicker. (Less typing)
The only other thing that I would recommend is to read through this CSS manual:
http://www.w3schools.com/css/css_intro.asp
This will help you continue to learn about position with css.
UPDATE:
This is what your code can look like:
CSS - Use it in the header
<style type="text/css">
#complainantAddress {
margin-right: 3px;
}
#city {
margin-right: 16px;
}
</style>
HTML
Complainant's Address: <input type="text" size="50" id="complainantAddress"/>
City: <input type="text" name="city" maxlength="15" size="15" id="city"/>
Notice that I created two css styles, one for each matching input boxes. Within each style I defined a margin which would add the appropriate spacing to the right of the input box.
So the first input box called "complainantAddress" will have 3px spacing to the right and the second one who's id is "city" will have 16px spacing to the right of it.
I wanna show a picture inside the default value of a text field. this is what I've tried but it doesn't work.
<input type="text" value="<img src="../images/left_arrow.gif" />Word" />
I've tried escaping the " but that doesn't work
you need to put the image as the background of the element..
html
<input type="text" class="with-default" value="Word" />
css
input.with-default{
background: url('../images/left_arrow.gif') 0 0 no-repeat;
}
Alternatively, if you are flexible about the actual arrow appearance, you could use a unicode char to display the arrow i.e. ⇐
for more unicode arrows: http://www.alanwood.net/unicode/arrows.html
demo: http://jsfiddle.net/6GyVM/
Why do you want a picture inside a text field? If it's just a decoration, use CSS background image.
this is for asp.net
http://www.bitrepository.com/how-to-add-a-stylish-icon-into-a-form-text-box.html