How can I add a default text in my HTML text just like in the image below
Right now this is my html codes:
<input type="text" class="form-control input-sm" name="guardian_officeno" placeholder="Office #" required pattern="[0-9].\d{8}|\d{11}" title="Only Numbers are accepted and must be 10 or 11 numbers"></td>
</div>
EDIT:
How can I add text that cannot be erased
As per the recent update of your question, you need to add readonly attribute to your input tag. If you are trying to disable part input, which is not possible, refer to last section of my answer.
<input type="text" value="SOME_DEFAULT_VALUE" readonly>
Adding readonly will prevent users to change the text in your input box.
Note: Don't rely on readonly as it can be easily overridden using
dev tools. Make sure you do have server side checks for the same.
Before you updated your question
Add value attribute to your input tag if you want some default text in the input box
<input type="text" value="Default Val">
If you are talking about the prefix i.e country specific STD code like +63, then you can do is split up your input tags, and set a default value in the first tag and let your user write the number in the other tag.
Edit, with the tag value:
https://www.w3schools.com/tags/att_input_value.asp
<input type="text" class="form-control input-sm" name="guardian_officeno" placeholder="Office #" required pattern="[0-9].\d{8}|\d{11}" title="Only Numbers are accepted and must be 10 or 11 numbers" value="default text"></td>
</div>
you mean you want to add a default text in "input" tag?
you need to add "value" attribute in there!
<input type="text" class="form-control input-sm" name="guardian_officeno" placeholder="Office #" required pattern="[0-9].\d{8}|\d{11}" title="Only Numbers are accepted and must be 10 or 11 numbers" value="put your default text right here"></td>
input tag not support for before attribute in css, but you can using wrapper by other tags. look for example below:
html + css
<div class="input-row">
Phone number:<span id="phoneNumber"><input type="text" name="phoneNumber" value="" placeholder="1234567890"></span>
</div>
<style>
.input-row {
display: inline-block;
line-height: 1;
}
span#phoneNumber::before {
content: '+63';
display: inline-block;
border: 1px solid #ccc;
padding: 1px;
line-height: 20px;
margin: 0px;
}
input[name='phoneNumber']{
line-height: 18px;
border: 1px solid #ccc;
margin: 0px;
padding: 2px;
}
</style>
Related
I have input type like :-
<input type="number" name="rtb-phone" id="rtb-phone" value="">
Now i need to do the validation in this input that cannot add number above 10 digit, and we must add first (05)...
So, we must add telephone NO like (0511111111).
any telephone not same 10 digit ,, and start with 05, we need to print error ,,,
How can do that ?
Source
HTML
<form>
<div>
<label for="telNo">Enter a telephone number (in the form 05-xxxx-xxxx): </label>
<input id="telNo" name="telNo" type="tel" required
pattern="[05]{2}[0-9]{8}">
<span class="validity"></span>
</div>
<div>
<button>Submit</button>
</div>
</form>
CSS:
div {
margin-bottom: 10px;
position: relative;
}
input[type="number"] {
width: 100px;
}
input + span {
padding-right: 30px;
}
input:invalid+span:after {
position: absolute; content: '✖';
padding-left: 5px;
color: #8b0000;
}
input:valid+span:after {
position: absolute;
content: '✓';
padding-left: 5px;
color: #009000;
}
<input type="number" name="rtb-phone" id="rtb-phone" value="" pattern="/[\0][\5]\d{8}/">
Try this
Try it like this:
^05\d{8}$
The regex matches from the beginning of the string ^ 05 and then 8 digits \d{8} until the end of the string $.
You are using a phonenumber so you might use type="tel" or type="text" and add the required attribute.
<form>
<input type="tel" name="rtb-phone" id="rtb-phone" value="" pattern="^05\d{8}$" required>
<input type="submit" name="submit" value="Click">
</form>
What's the recommended approach to change the background color of input and textarea when there's no value? Can this only be done on page load or can it be persistent? I prefer if it's persistent since I have a form that loads from callbacks.
I'm thinking JQuery would be best for this to affect this css:
input[type="text"], textarea {
background-color : #d1d1d1;
}
I tried this, but only the textarea had the changes for some reason:
input[type="text"]:empty, textarea:empty {
background-color : #d1d1d1;
}
DevExpress input textbox:
<input class="dxeEditArea_DevEx dxeEditAreaSys"
id="ctl00_ctl00_ASPxSplitter1_Content_ContentSplitter_MainContent_ASPxCallbackPanel1_ASPxFormLayout3_ASPxFormLayout3_E18_I"
name="ctl00$ctl00$ASPxSplitter1$Content$ContentSplitter$MainContent$ASPxCallbackPanel1$ASPxFormLayout3$ASPxFormLayout3_E18" readonly="readonly"
onfocus="aspxEGotFocus('ctl00_ctl00_ASPxSplitter1_Content_ContentSplitter_MainContent_ASPxCallbackPanel1_ASPxFormLayout3_ASPxFormLayout3_E18')"
onblur="aspxELostFocus('ctl00_ctl00_ASPxSplitter1_Content_ContentSplitter_MainContent_ASPxCallbackPanel1_ASPxFormLayout3_ASPxFormLayout3_E18')" value="Business"
type="text" style="background-color: rgb(192, 224, 206);">
I've also tried empty/not empty method and it still doesn't work for some reason. It changes color to gray, but it doesn't change the background to white if it's not empty:
input[type="text"]:empty {
background-color : #d1d1d1;
}
input[type="text"]:not(:empty) {
background-color : #FFFFFF;
}
You might need the attribute required and the selector :invalid
input[type="text"]:invalid, textarea:invalid {
background-color : #d1d1d1;
}
<input required type="text" placeholder="write here"/>
<textarea required placeholder="write here"></textarea>
<hr/>
<input required type="text" placeholder="write here" value="text"/>
<textarea required placeholder="write here">text</textarea>
It could be done quite easily with jQuery, cross-browser of course.
$(':input').on('input', function() {
$(this).toggleClass('empty', this.value.length === 0);
}).trigger('input');
input.empty, textarea.empty {
background-color : #d1d1d1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input />
you can use Attribute Selector for placeholder in input and textarea or for value in input and :focus :
[placeholder=""],
[value=""] {
background: red;
}
[placeholder=""]:focus,
[value=""]:focus {
background: none
}
<h2>Placeholder</h2>
<input type="text" placeholder="" />
<textarea placeholder=""></textarea>
<hr />
<h2>Value</h2>
<input type="text" value="" />
I am trying to wrap my text input with a label. I have some pickers on my form, and wrapping them in a label enables me to click on the label and activate the picker. However, when I try this with the text box it breaks the form. If I choose not to wrap the text boxes, the spacing between the label and the text box is different than the wrapped elements.
This doesn't work:
<div class="form-group">
<label>
Title:
<input type="text" class="form-control" data-bind="value: title" />
</label>
</div>
This works:
<div class="form-group">
<label>
Date:
<div class="input-group">
<input type="text" class="form-control" placeholder="mm/dd/yy" data-provide="datepicker" data-bind="value :date" id="Date" />
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</label>
</div>
Also, the text inside the text inputs should not be bold.
You want to update your css, changing your label's to either display as block, or set their width to 100%. Then you also want to have input's inside labels set to a font-weight of normal.
label {
display:block;
}
label input {
font-weight:normal
}
https://jsfiddle.net/partypete25/95ygubwx/
As an alternative, don't need to wrap elements for activation, you can just use the for attribute:
<label for="title">Title</label>
<input id="title" type="text" class="form-control" data-bind="value: title" />
If you don't want this, then you need to understand cascading styles.
You don't need to wrap input inside label. for attribute of label element is doing the same thing you want to achieve.The correct way to create form control in bootstrap is:
<div class="form-group">
<label for="title">Title:</label>
<input type="text" class="form-control" data-bind="value: title" id="title" />
</div>
Why input not taking full-width and text being bold: Following is the label css applied by bootstrap library.
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: 700;
}
In your case, if you wrap input inside label, input is inhering the font-weight: 700 px; from it's parent(label) and hence bold.
And the parent label's max-width: 100% is restricting the input width. If it could have width: 100% than, input would take full width. There is difference between max-width and width.
Lets say I have this form input element:
<label for="myInput">Label Text</label>
<input type="text" name="special" id="myInput" required>
Now since this input is required, and I don't enter any values in this field, I get an error saying
This field is required.
Validation: It appears that the existing default html5 validation is overridden by jQuery validator. There is magic happening, and I see that I can change the existing style behavior by changing the below css
select.error,
input[type=text].error,
input[type=email].error,
input[type=password].error {
border: 2px solid #ff0000;
}
label.error {
color: #ff0000;
font-size: .8em;
}
I also notice that in the error situation the above html becomes like below:
<label for="myInput">Label Text</label>
<input type="text" name="special" id="myInput" required>
<label class="error" for="myInput">This field is required.</label>
How do you think validation is happening in the first place?
How do I make the text in the first label element text as red?
In the code, where should I be looking to answer the above questions?
first use id attribute for label
<label for="myInput" id="mylabel">Label Text</label>
, then document.getElementById('mylabel').style.color = "red";
you can write this code on some button click or onblur of text box
DEMO
If you are using jquery then you can refer the below code
$( "#myInput" ).blur(function() {
document.getElementById('mylabel').style.color = "red";
});
JS solution
html
<label for="myInput" id="mylabel">Label Text</label>
<input type="text" name="special" onblur="blurFunction()" onfocus="focusFunction()" id="myInput">
js
function blurFunction()
{
document.getElementById('mylabel').style.color = "red";
}
I would like simulate input disabled. I would like don't have change value in input, but this value should be send with POST with FORM.
<input class="dis" type="text" disabled="disabled" value="111">
<input class="no" type="text">
<input class="dis" type="text" disabled="disabled" value="333">
http://jsfiddle.net/hC4WP/
I can use also CSS and jQuery, but how?
Use the readonly attribute instead of disabled.
However, this will not result in the field being grayed out. To achieve this, use the following CSS:
input[readonly] { color: #aaa; }
(you might have to change the color a bit to look more like the original disabled color)
Use readonly instead of disabled
Solution with tabindex.
Create a .disabled class.
CSS:
.disabled {
pointer-events:none; /* No cursor */
background-color: #eee; /* Gray background */
}
JS:
$(".disabled").attr("tabindex", "-1");
HTML:
<input type="text" class="disabled" />