Here is my code:
<table>
<tr>
<td><input type="text" value="test1" readonly /></td>
</tr>
<tr>
<td><input type="text" value="test2" readonly /></td>
</tr>
<tr>
<td><input type="text" value="test3" readonly /></td>
</tr>
</table>
How do I remove the cursor from the text box?
If the browser shows the insertion caret when the readonly attribute is set on an input[type="text"] element, you may be able to use the caret-color CSS property to make the caret transparent:
.caret-hidden {
caret-color: transparent;
}
<input class="caret-hidden" type="text" readonly>
Poor man's solution: transmit value in a hidden form item (<input type="hidden">) and display it in a regular HTML container (<p></p>, <div></div> or whatever).
The mouse cursor has several CSS values.
To remove the cursor from the textbox you can use the following
<input type="text" value="test2" style="cursor:none" readonly />
By setting it to none, the cursor will not be displayed. But you can also choose to use other styles like cursor:zoom-in. cursor: default etc.
For more CSS cursor values, take a look at the MDN documentation here
Do you mean this :
<input type="text" name="site" value="Stackoverflow" readonly="readonly" />
Demo : http://jsfiddle.net/UuZnh/
Related
I have table in which i have input/radio buttons, and i need to make if user selects radio button in specific cell, that cell should have border, so that cell looks like selected. I dont have, any idea how to do this.
Here is example of table.
<tr class="crna">
<td>Crna</td>
<td class="no-value"></td>
<td>
<input id="r-band2-crna" value="0" type="radio" name="prsten-2-radio" checked="checked">
<label for="r-band2-crna">0</label>
</td>
<td>
<input id="r-band3-crna" value="0" type="radio" name="prsten-3-radio" checked="checked">
<label for="r-band3-crna">0</label>
</td>
<td>
<input id="r-multi-crna" value="1" type="radio" name="prsten-4-radio" checked="checked">
<label for="r-multi-crna">x10<sup>0</sup></label>
</td>
<td class="no-value"></td>
<td><input id="r-tcr-crna" value="250" type="radio" name="tcr-radio" checked="checked">
<label for="r-tcr-crna">±250</label>
</td>
</tr>
This should be done using jQuery and CSS.
Thanks for help.
This solution is at jQuery and CSS.
The border is added by the class, method addClass(). The class itself must be added to your CSS:
.current {
border: 1px solid green;
}
Also, method closest() is applied, which allows you to refer to the specified parent of the tag <td>.
$('input[type="radio"]').on('change', function() {
$('input[type="radio"]').closest('td.current').removeClass('current');
$(this).closest('td').addClass('current');
});
.current {
border: 1px solid green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="crna">
<td>Crna</td>
<td class="no-value"></td>
<td>
<input id="r-band2-crna" value="0" type="radio" name="prsten">
<label for="r-band2-crna">0</label>
</td>
<td>
<input id="r-band3-crna" value="0" type="radio" name="prsten">
<label for="r-band3-crna">0</label>
</td>
<td>
<input id="r-multi-crna" value="1" type="radio" name="prsten">
<label for="r-multi-crna">x10<sup>0</sup></label>
</td>
<td class="no-value"></td>
<td><input id="r-tcr-crna" value="250" type="radio" name="prsten">
<label for="r-tcr-crna">±250</label>
</td>
</tr>
</table>
To get you going in the right direction at least, here are some high level ideas:
When the radio button gets toggled, there are two possible ways you can leverage that to apply a style:
a. events like click and change are fired that you can respond to with your JavaScript.
b. The :checked CSS pseudo-class selector applies to the element if it's toggled on
either by adding/removing an attribute (usually a class attribute like 'active-cell') on the event, or leveraging the native pseudo-class, you'll need to add the styles to represent a border. (Here's a breakdown of why I say 'represent' a border: Applying borders to a single table cell when using border-collapse - it's not quite as simple as adding a css border property.)
Usually toggling a class is going to dramatically simplify your HTML and CSS because you can do a bit of DOM traversal to select a parent element of the input to apply the class and it's styles to.
Using the pseudo class is nifty in that it doesn't require JavaScript, but since CSS doesn't have a 'parent' selector, and you want to style the cell containing the input you have to get creative with your selectors...that would likely be done by having the element right after the input be selected, (or maybe a :before pseduo element) and adding some positioning and other styling to make it look like a border. for example:
input[type="radio"]::checked + label::before {
/* styles will apply to label elements that immediately follow selected radio inputs */
}
First, the radio buttons from the same group shall have the same name.. Also why all buttons are checked?
To achieve what you want you can use event listeners. there are event listeners for every action and then you can change the DOM when the action happens.
So with the radio button you can create an event listener for "change" action.
$(document).ready(function(){
$('input[name="prsten-2-radio"]').change(function(){
// remove border from other cells
$('input[name="prsten-2-radio"]').parent().attr('style', 'none')
//put a border only to the selected
$(this).parent().attr('style', 'border: solid black')
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="crna">
<td>Crna</td>
<td class="no-value"></td>
<td>
<input id="r-band2-crna" value="0" type="radio" name="prsten-2-radio">
<label for="r-band2-crna">0</label>
</td>
<td>
<input id="r-band3-crna" value="0" type="radio" name="prsten-2-radio">
<label for="r-band3-crna">0</label>
</td>
<td>
<input id="r-multi-crna" value="1" type="radio" name="prsten-2-radio">
<label for="r-multi-crna">x10<sup>0</sup></label>
</td>
<td class="no-value"></td>
<td><input id="r-tcr-crna" value="250" type="radio" name="prsten-2-radio">
<label for="r-tcr-crna">±250</label>
</td>
</tr>
</table>
Here are some resources that might help you:
https://www.w3schools.com/jquery/jquery_selectors.asp
https://www.w3schools.com/jquery/jquery_events.asp
https://api.jquery.com/category/selectors/
https://api.jquery.com/category/events/
Good luck!
I have a table row with an input field in each cell that is used to filter a column.
How can I remove all padding from the td's in this row so that there is no extra space between the input field borders and the td's containing them ?
Currently the td's containing input field appear much bigger because of this.
Note: This is just needed for one specific row, all other rows will stay standard-formatted.
My tr looks like this:
// ...
<tbody>
<tr>
<td><input type="text" name="input1" /></td>
<td><input type="text" name="input2" /></td>
<td><input type="text" name="input3" /></td>
</tr>
// ...
</tbody>
Many thanks for any help with this, Tim.
Firstly add a class to the :
<tbody>
<tr class="noPadding">
<td><input type="text" name="input1" /></td>
<td><input type="text" name="input2" /></td>
<td><input type="text" name="input3" /></td>
</tr>
</tbody>
Then in your CSS:
.noPadding td { padding: 0; }
If you find you're still getting extra spacing there may be some margins applied to the inputs themselves (depends on your other CSS / browser defaults) if so worth trying:
.noPadding td input { margin: 0; }
Hope this helps.
It looks like what you're seeing is margin created by the form fields by default, try this:
Css to be placed in your style tags in the head:
.noMargin { margin: 0; }
Hint: you can assign margin a minus value to reign in the space more, in this instance:
.noMargin { margin: -2px; }
worked for me (using safari, but will vary by browser)
Your html:
<tbody>
<tr>
<td><input type="text" name="input1" class="noMargin" /></td>
<td><input type="text" name="input2" class="noMargin" /></td>
<td><input type="text" name="input3" class="noMargin" /></td>
</tr>
</tbody>
I hope this helps.
You can use jquery to remove padding of all the table tds where it has text input boxes
$(function () {
$('.myTable').find(':text').parent('td').css('padding','0');
});
as shown in http://jsfiddle.net/WTBsp/1/
I have this form:
<form action="insertar-modelo.php" method="post" enctype="application/x-www-form-urlencoded">
<table>
<tr><td class=Forms>ICAO: <input type="text" value="" name="ICAO" /><br/><br/></td</tr>
<tr><td class=Forms>Name: <input type="text" value="Airbus A320" name="nombre" /><br/><br/></td></tr>
<tr><td class=Forms>Price: <input maxlength="9" value="1000000" type="text" name="precio" /> €<br/><br/></td></tr>
<tr><td class=Forms>Number Classes: <select name="numberclasses" id="numberclasses" onchange="callAjax()">
<option>Select Number of Classes</option>
<?php
echo'<option value="1">One</option>';
echo'<option value="2">Two</option>';
echo'<option value="3">Three</option>';
?>
</select><br/><br/></td></tr>
<tr><td class=Forms>First Class: <input disabled="disabled" type="text" name="classes1" /><br/><br/></td></tr>
<tr><td class=Forms>Bussines Class: <input disabled="disabled" type="text" name="classes2" /><br/><br/></td></tr>
<tr><td class=Forms>Economy Class: <input disabled="disabled" type="text" name="classses" /><br/><br/></td></tr>
<tr><td class=Forms>Capacidad: <input maxlength="3" value="150" type="text" name="pax" /> pasajeros<br/><br/></td></tr>
</table><br />
<input type="submit" name="enviar" value="Insertar"/>
</form>
And the CSS class Forms is:
td.Forms {
text-align: left;
text-indent: 10px;
font-family: Century Gothic;
font-weight: normal;
font-size: 15px;
white-space: nowrap;
}
The boxes start when the title finish and I want the boxes start all in the same part. I think the idea is see the titles in one colum and the boxes in other, like this http://i48.tinypic.com/2nbd2m8.png, but I have this http://i49.tinypic.com/1exb80.png
You need to add extra cells (<td>) for your input fields so that they all start on the same position. Additionally you may want to define a width to ensure that you have enough space between one cell and another on a row. I defined it to all <td>'s by adding width: 200px; to your td.Forms. Lastly to give spacing between rows I added:
td {
padding: 10px 0;
}
Which adds 10px padding to the top and bottom of every cell.
Checkout this fiddle to see the code in action.
Below is the correct html markup (assuming you're going to use table layout for this). Here is a demo.
<form action="insertar-modelo.php" method="post" enctype="application/x-www-form-urlencoded">
<table>
<tr>
<td class=Forms>ICAO:</td>
<td><input type="text" value="" name="ICAO" /></td>
</tr>
<tr>
<td class=Forms>Name:</td>
<td><input type="text" value="Airbus A320" name="nombre" /></td>
</tr>
<tr>
<td class=Forms>Price:</td>
<td><input maxlength="9" value="1000000" type="text" name="precio" /> €</td>
</tr>
<tr>
<td class=Forms>Number Classes:</td>
<td>
<select name="numberclasses" id="numberclasses" onchange="callAjax()">
<option>Select Number of Classes</option>
<?php
echo'<option value="1">One</option>';
echo'<option value="2">Two</option>';
echo'<option value="3">Three</option>';
?>
</select>
</td>
</tr>
<tr>
<td class=Forms>First Class:</td>
<td><input disabled="disabled" type="text" name="classes1" /></td>
</tr>
<tr>
<td class=Forms>Bussines Class:</td>
<td><input disabled="disabled" type="text" name="classes2" /></td>
</tr>
<tr>
<td class=Forms>Economy Class:</td>
<td><input disabled="disabled" type="text" name="classses" /></td>
</tr>
<tr>
<td class=Forms>Capacidad:</td>
<td><input maxlength="3" value="150" type="text" name="pax" /> pasajeros</td>
</tr>
</table>
<input type="submit" name="enviar" value="Insertar"/>
</form>
I am going to give you the answer - but first I want to explain some semantics and how one can properly code a form WITHOUT using tables.
Html form have been around since the inception of html. You will be amazed how many html form elements ARE NOT utilized when they simply exist to help you code properly semantic html. Proper semantic html means:
1) Your code is accessible to text viewers such as Google search engine and browsers used by blind people
2) Fulfills federal law (US laws require school/government websites to be accessible)
3) Will make it easier for you to code the backend (php) in the long run.
A form at its barebones should include:
<form>
<fieldset>
<div>
<label for="first-name">First Name</label>
<input type="textbox" name="first_name" id="first-name" value="" />
</div>
<div>
<label for="gender_selection">Gender</label>
<select name="gender" id="gender_selection">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</fieldset>
</form>
You must have a fieldset tag for each form tag.
label tag is used to define what the form element stands for. THIS IS WHAT tells a text viewer what each form element stands for! Sure you can do without but why when this tag was created for exactly that purpose.
The div tags will allow you to easily style errors/corrections needed.
CSS
form div {
overflow: hidden;
}
form div label {
float: left;
width: 120px;
padding: 0 20px 0 0;
}
form div input, form div select {
float: left;
width: 220px;
}
Simple css (not tested) to mimic your tabular forms with the added advantage of not using tables, being accessible, and using proper html.
Now if a user made an error with in let us say first name we simply add class .error to that div:
<div class="error">
<label for="first-name">First Name</label>
<input type="textbox" name="first_name" id="first-name" value="" />
</div>
CSS:
div.error label {
color: red;
}
div.error input {
border: red;
color: red;
}
ANSWER TO YOUR QUESTION:
Your html form "label" elements do not have a fixed width. Add a fixed width by either adding an extra <td> column or using the code I provided above.
Hopefully this post will help you for the future.
i am trying to recreate the login form shown on tinypic's main page.
in html, i have the 3 elemnts like this:
E-Mail:
<input type="text" name="id" maxlength="30" value="" />
Password:
<input type="text" name="pw" maxlength="30" value="" />
<input type="submit" name="submit" value="Login" />
i have tried putting them into separate divs,
using float:left with a unique class in css
but the code is really messy unreasonably long.
so essentially, i wanted to know if there was a simple way to achieve this layout with html and css.
thanks for the time!
This CSS should work, though I haven't tested:
input { display: inline; }
Here is my solution: ( http://jsfiddle.net/HcppN/ )
HTML:
<label>E-Mail:</label>
<input type="text" name="id" maxlength="30" value="" />
<label>Password:</label>
<input type="text" name="pw" maxlength="30" value="" />
<input type="submit" name="submit" value="Login" />
CSS:
input, label {
float:left;
margin:5px;
}
I also recommend you to encapsulate the labels in <label> tags. You can even use the for="inputId" attribute, so that clicking on the label brings the input into focus.
Just add display:inline to your input elements, as shown here
Though there are already accepted and up voted answers, I just want to contribute a way to make a form horizontal without any kind of CSS. Using HTML table is an effective way to make a horizontal form.
Example 1:
<table>
<tr>
<td>First Name</td>
<td><input type="text" name="fname" > </td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="lname" > </td>
</tr>
</table>
</form>
Example 2:
<form method="">
<table>
<tr>
<td><input type="text" name="fname" ></td>
<td><input type="text" name="lname" ></td>
........................
</tr>
</table>
</form>
My experience says, sometimes in different cases the CSS/class may not work or sometimes they may conflict ; but using an HTML table to make an HTML form is something like forcing to be what we want to be appear. Thank you.
my html code is
<tr>
<td>User ID:</td>
<td><input type="text" id="uid" size="20"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" id="pass" size="20"></td>
</tr>
<tr>
but the problem is, password textbox length is coming diffrent in IE, means uid size is 20 but pass size is around 17.
Try using style="width:200px" for example rather than specifying size that way.
<input type="text" id="uid" style="width:200px;">
<input type="password" id="pass" style="width:200px;">
Or you can create a class in the CSS like this:
.input{
width:200px;
}
And use like this:
<input type="text" id="uid" class="input">
<input type="password" id="pass" class="input">
You can fix it with width: 150px; (with CSS).
In CSS file :
input {
width: 150px;
}
Or in inline CSS : style="width: 150px;" .
Edit : Grilled :) .