I created four text input fields in a single row in a HTML table. Like expected, they show as four separate boxes. I want to make them look like one long field with placehohlders at different positions to indicate the different values. I know that it might look like one field when I have removed the text box borders, but is there some other way?
<form>
<table>
<tr>
<input type="text" id="project" placeholder="project">
<input type="text" id="task" placeholder="task">
<input type="text" id="skill" placeholder="skill">
<input type="text" id="phase" placeholder="phase">
</tr>
</table>
</form>
Remove default margin, display inputs next to each over and style borders to look like on long input :
input{
display:table-cell;
margin:0;
border-width: 1px 0 ;
}
input:first-child{
border-width: 1px 0 1px 1px;
}
input:last-child{
border-width: 1px 1px 1px 0;
}
JSFiddle
Related
So for my regular input type="text" field I use the following code to change the color to green, only after something has been typed in and it is valid:
input[type="text"]:not(:placeholder-shown):valid {
background-color: green;
}
Is there any way to the same for an input type="date" field?
<input type="date" class="form-control calender-black" name="dbfield52">
The problem seems to be it already is valid since it shows: DD-MM-YYYY as standard value.
Is there a way to do this with css only selectors? Or else maybe with javascript.
You can do this easily using :valid css pseudo-class like:
input[type="date"]:valid {
border: 2px solid green;
}
Demo:
( Just select a value from control and it will add a green border to the date control )
/* This is just used to set some styling */
input[type="date"] { padding: .375rem .75rem;font-size: 1rem;line-height: 1.5;border-radius: .25rem;border: 2px solid #ced4da; }
input[type="date"]:focus { outline: 0; }
/* This is the important part */
input[type="date"]:valid {
border: 2px solid green;
}
<form>
<input type="date" class="form-control calender-black"
name="dbfield52" required /><br/>
<p>
<button>Submit</button>
</p>
</form>
You have to set the input as required in order for validation to work:
input[type="date"]:valid {
background-color: green;
}
<input type="date" class="form-control calender-black" name="dbfield52" required>
I need to make 30 different text inputs slightly farther from one another. How could I do this? There are only three below, but I can't just go through and do all 30.
<!DOCTYPE html>
<html>
<head>
<title>Worksheet</title>
<style type="text/css">
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
input::placeholder{
color: #d9faa7;
}
</style>
</head>
<body>
<img src="A.png" class = "center">
<form>
<input type="text" id="fname" name="fname" size="2" style='position:absolute;top:210px;left:389px'>
<input type="text" id="fname" name="fname" size="2" style='position:absolute;top:210px;left:446px'>
<input type="text" id="fname" name="fname" size="2" style='position:absolute;top:210px;left:503px'>
</form>
</body>
</html>
the id should be unique, so better apply the attribute of class with the same name to all input fields, which can be used to style them.
also using loop in JS you can solve this problem.
let form = document.querySelector("form");
let node;
let textInputId;
for(let i=0;i<30;i++)
{
node = document.createElement('input');
textInputId= 'fname'+i;
node.setAttribute('id',textInputId);
node.setAttribute('type',"text");
node.setAttribute('name',"fname");
node.setAttribute('size',"2");
form.appendChild(node);
}
If you are going to be using the input elements to perform a certain action you need to make sure the id and the name of each of these elements are different.
And on the other hand, about making 30 different text inputs you can try using dynamic text input in the event that you want to enter text with the same id and name over and over again. Try researching on looping.
If you want to change the way something appears and just its appearance, just use some simple CSS...
input {
display: block,
margin: 5px,
}
The margin here is 5px, you can change as needed. In the end, you may decide to go with a better selector, i.e., <input type="text" ... class="myinputclass">, then your style selector would be: .myinputclass instead of just input.
I have two forms on the same page with two labels with for attributes pointing to two checkboxes that have the same ID and name.
When I click one of the second form labels it checks the first form checkbox.
In this case the problem lies when you click the 'x name 2' label, it checks the 'x name' check box, even though they are in different forms:
.customCheckbox div label {
padding: 5px;
background-color: white;
border: 2px solid #aaaaaa;
background-image: none;
}
.customCheckbox div input {
margin: 8px auto;
padding: 5px;
text-align: left;
margin-left: -999999px;
float: left;
}
.customCheckbox input[type=checkbox]:checked ~ label,
.customCheckbox input[type=radio]:checked ~ label {
background-color: #117399;
color: #eeeeee;
}
.customCheckbox input[type=radio]:checked ~ label {
background-color: #117399;
color: #eeeeee;
}
<form style="margin:30px;">
<div class="customCheckbox">
<div>
<input id="x" name="x" type="checkbox"/><label for="x">x name</label>
</div>
<br/>
<div>
<input id="y" name="y" type="checkbox"/> <label for="y">y name</label>
</div>
</div>
</form>
<form style="margin:30px;">
<div class="customCheckbox">
<div>
<input id="x" name="x" type="checkbox"/><label for="x">x name 2</label>
</div>
<br/>
<div>
<input id="y" name="y" type="checkbox"/> <label for="y">y name 2</label>
</div>
</div>
</form>
I'd like to stay away from renaming the elements (as there are quite a few places this occurs)
I'd like to try to stay away from JavaScript (if possible)
Since I am using CSS for styling the labels and checkboxes I cannot nest the checkbox inside the label (because you can't style a parent element in CSS)
It is not legal to use the same id property twice on the same page. It does not matter at all if the elements are on the same form or different forms.
They can absolutely have the same name property. Names are what gets sent to your server. You can have fifty elements on the same form with the same name if you want.
But the whole purpose of IDs is that they absolutely must be unique on the page.
So simply make the first one ... id="x1" name="x" ... and the second ... id="x2" name="x" ... and then make your labels point to for="x1" or for="x2"
There's no problem when different input fields have the same name, as long as they're in a different form or they represent the same parameter (eg. in the case of radio buttons).
However, you should NEVER use the same id for different HTML elements.
From the HTML5 specs:
The id attribute specifies its element's unique identifier (ID).
If you make your ids unique, your labels will work as expected.
at the moment I am trying to add some functionality for a user to be able to submit an anonymous suggestion. I am trying to clear a textbox that contains the users name when the user checks the checkbox. However my code does not clear the checkbox when checked. is there a way to clear the checkbox before the form is submitted?
Thanks
<div>
<label style="display: inline-block; margin-left: 10px; letter-spacing: 2px; color: #007A8E;">
<div align="left"><b>Name:</b> </div>
</label>
<div align="left">
<input type="checkbox" style=" margin-left: 110px; outline: 1px solid #0078AE; " name="Anonymous" value="Anonymous" onClick="CheckAnon">
</div>
<label style="margin-left: 2px; color: #0078AE;">
<div align="left">Anonymous</div>
</label>
<div align="left">
<?
function CheckAnon()
{
if(isset($_POST['Anonymous']) == 'Anonymous')
{
$anonFirstName="Anon";
$anonLastName="Anon";
}
else if (isset($_POST['Anonymous']) != 'Anonymous')
{
$anonFirstName = $firstName;
$anonLastName= $lastName;
}
}
?>
</div>
</div>
<div align="left">
<input name="firstname" style="height: 34px; width: 268px; margin-left: 10px; margin-top: 5px; color: #007A8E;
border: 1px solid #dedede; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;" type="text"
value="<? echo $anonFirstName?> <? echo $anonLastName?>">
</div>
You can do this at client side using jquery or javaScript.
Assume this text box:
<input type="text" id="fname" />
JavaScript Method:
<script type="text/javascript">
function clearTextBox() {
// Code to clear textbox on Checkbox tick
var textname = document.getElementById("fname"); //get textbox id
textname.value = ""; // clear the textbox
}
</script>
You can do it in PHP as you want.
But, doing it in jQuery is quite simple.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$("#Anonymous").change(function(){
if ($(this).is(':checked')) {
$("#firstname").val('');
}
});
});
</script>
You are confusing clientside scripting (JavaScript in your case) with what the server receives (PHP).
The function you call:
onClick="CheckAnon"
Does not exist on the client. Also use: onClick="CheckAnon();"
There are more problems in your code. I advice you to use Firefox and look in the errorlog of javascript. This will help you a lot to trace the bugs.
Also make sure you understand what happens in the client (browser), and the server (after you post a form)
I think you need to clear that up first before you start clearing textboxes with JavaScript)
<label for="apsgender">
<div class="join-label">Gender</div>
</label>
<fieldset id="gender_male">
<input type="radio" name="apsgender" value="1">
Male
</fieldset>
<fieldset id="gender_female">
<input type="radio" name="apsgender" value="2">
Female
</fieldset>
This is the code I am dealing with right now. Setting up my css with this method I took from another stackoverflow post is not working because of the use of fieldsets and odd label up front.
input[type="radio"] {
display:none;
}
label {
display:block;
padding-left:30px;
font-family:Arial;
font-size:16px;
background: url('http://projects.opengeo.org/common/geosilk/trunk/silk/cross.png') left center no-repeat;
}
input[type="radio"]:checked + label {
background: url('http://particletree.com/examples/buttons/tick.png') left center no-repeat;
}
Our development team set this code up and I guess no one has ever attempted to use images for radio buttons. Also I could use pure JS, if it's possible, but i can only place the scripts in the body before the elements, not after.
Let me know if this is even possible. Thanks in advance.
I'll post the jsFiddle i'm working on but literally it's going no where. http://jsfiddle.net/z25FR/1/
I have a CSS solution for this, but some HTML will need to change.
fiddle
First of all, we need to hide the radio button, because it can't be styled:
input[type="radio"]{
display: none;
}
Then, we make the text near the radio button a label:
<input id="male" type="radio" name="apsgender" value="1">
<label for="male">Male</label>
(don't forget the id and for or you won't have how to check the radio button)
Then, we style the label to look like it's a button:
input[type="radio"]+label{
background: url('http://projects.opengeo.org/common/geosilk/trunk/silk/cross.png') left center no-repeat;
padding-left: 30px;
}
The above code will modify the label directly following the radio button. Then, we can change the background to another image when the radio button is :checked:
input[type="radio"]:checked+label{
background-image: url('http://projects.opengeo.org/common/geosilk/trunk/silk/accept.png');
}
While this may not help, I will mention you're incorrectly coding the HTML. It should be:
<fieldset>
<legend>Gender</legend>
<input type="radio" name="apsgender" id="m" value="1">
<label for="m">Male</label>
<input type="radio" name="apsgender" id="f" value="2">
<label for="f">Female</label>
</fieldset>
I have seen custom radio buttons, but don't have a source. However, depending how it is done may have some accessibility implications
http://jsfiddle.net/nm3uB/1/
You need to use Javascript to rewrite the HTML, and then CSS for the field switching. Everything can go in the head and no need to touch the template.
JS:
window.onload=function(){
gender_male.innerHTML='<input type="radio" name="apsgender" value="1" checked><label>Male</label>';
gender_female.innerHTML='<input type="radio" name="apsgender" value="2"><label>Female</label>';
}
CSS:
fieldset{position:relative}
input[type="radio"]{
opacity: 0;
position:absolute;
}
input[type="radio"]+label{
background: url('http://projects.opengeo.org/common/geosilk/trunk/silk/cross.png') left center no-repeat;
padding-left: 30px;
}
input[type="radio"]:checked+label{
background: url('http://projects.opengeo.org/common/geosilk/trunk/silk/accept.png') left center no-repeat;
padding-left: 30px;
}