create a label for text inputs that is diffrenet from value - html

for example i have a disabled input that holds a time span, but i want to show it to user in a friendly format. just like select element, the option with in can hold a value that is different from what is displayed
<select><option value=1>Label is there</option></select>
can it be done with input ?
something like
<input type='text' value='<?=$time?>' label='<?=date('c',$time);?>' />
P.s: im not asking for a place holder.
currently im doing
<label for="app_time">Time</label>
<input type="hidden" value="2013-04-27 15:40:00" name="app_time">
<input type="text" value="27 Apr 13, 03:40" Disabled>
is there any other method ?

You can wrap an input in the label tag.
<label>Text for the input <input type="text" name="yourInput"></label>
Or you can reference the input from a label tag.
<label for="yourInput">Text for the input</label>
<input type="text" name="yourInput" id="yourInput">
You can add styling to the label element and it aids people using assistive technology as it links the description with the form element.

Not in the way you are asking, however you could always try it with a hidden element holding the real value...
Try;
<input type="text" value="<?=date('c',$time);?>" name="dummytime" />
<input type="hidden" value="<?=$time;?>" name="realtime" />
So to get $time it would be $_POST['realtime'] and to get the formatted date value it would be $_POST['dummytime'].

No, not in the way you're asking. The value of the text input is what is displayed within it.
As an alternative you could use a hidden input with the actual value, and then put the label in the text input

Your best bet is to handle converting the date to a timestamp on the server side. You'll need to ensure the submitted text is able to be converted to a timestamp, however, and show the user an error if not. There is not a built-in way for JavaScript to convert some given user-inputted string to a computer-readable date format.
Edit: I'm assuming you want the actual value to match whatever the user enters, not a static timestamp. If you want to submit a static value regardless of the user's input, simply use a hidden input (<input type="hidden">) and a secondary text input that you can ignore.

Related

How can I send or assign one input to multiple names in html?

Hi I have a simple question that I haven't been able to find the answer for. I have two fields in my CRM that I want to map to the user input in a form. How can I send it to both fields? Currently the below code only sends it to "dayphone".
<fieldset><input name="dayphone" name="eveningphone" type="number"
autofocus="" placeholder="phone" /></fieldset>
You can use Jquery to add the value of the input field to a hidden input field.
Jquery
$('#phoneOne').change(function() {
$('#phoneTwo').val($(this).val());
});
Hidden input field
<fieldset>
<input name="dayphone" id="phoneOne" type="number" autofocus="" placeholder="phone" />
<input name="eveningphone" id="phoneTwo" type="hidden" />
</fieldset>
This way it will only display one input field but two fields will be posted when you submit the form.
Also I know your tags specified HTML, but you simply can't do this in HTML alone you need some sort of scripting language (I chose Jquery)

HTML submit multiple values through one check box?

Hello I have a form that allows the user to check as many options as they like and then hit submit. Is there any way to have the input type 'checkbox' submit more than one value?
For example right now I have:
<input type="checkbox" value="testuser">
But I want something like:
<input type="checkbox" value="testuser" valuetwo="1">
Is there any way to achieve this second option?
Thanks!
Since there is no way to submit to values, is there a way to submit them both in value one?
For example:
<input type="checkbox" value="testuser,1">
And if so how would I separate the value into two?
From your comments, it sounds like you have some JavaScript that handles the data before it's submitted. If that's the case, you can add a data attribute to the checkbox. To use your example, you could call it data-valuetwo.
<input type="checkbox" value="testuser" data-valuetwo="1">
Then, your JavaScript can use getAttribute to retrieve the value in your data-valuetwo attribute and handle it appropriately. It could look something like this:
var valuetwo = checkbox.getAttribute("data-valuetwo");
I found a way to do this without JavaScript or Libraries using a hidden form-field instead:
<input name="selectedValue" type="hidden" value="defaultValue">
<input name="selectedValue" type="checkbox" value="secondValue">
Now, if the checkbox is not selected, the hidden value is sent, if it is selected, the hidden value is overridden.
You might try alternative using select2, see: https://select2.github.io/examples.html (Tagging support, use two options limit). Again, there is no enough information supplied to fully satisfy Your question.
Another approach with select box and JSON is Can an Option in a Select tag carry multiple values? (can be rewritten for checkbox)

Preinput Form Non Submitable Form Value- HTML

<input name="price" id="asdprice" value="" type="text">
I do not wish to use any JS if possible
As you can see the value field is empty, and I do not want to prefill it as it will be submitable.
What I want is a prefilled text area, with lets say
http://www.
as i would like that to be a valid format for that field, normally such filled input will be less opaque.
You can display a hint for the user to enter a valid URI using an input placeholder attribute:
<input name="price" id="adsprice" type="text" placeholder="http://">
However the placeholder text will disappear once the field comes into focus. You should be aware that users will enter all kinds of rubbish into form fields, so always validate the input on the server-side and prepend the http:// if it's missing.
BTW, there are valid URIs that do not begin with http://www. and not all sites redirect the www. subdomain as you would expect.

How can user make input type date empty?

I wish to use the new input attribute from HTML5 DATE, only one problem, in the logic of the project, the user must be have the choice to delete the value, but i don't see, how to set empty value on this inputs
Assuming you want to make the value shown to dd/mm/yyyy, then click on Clear button.
In HTML5 on Chrome the date picker popup has a "clear" button at the bottom (next to "today")
<input type="date" value="">
<input type="date" name="NameItAnythingYouWant" value="">

If I want a form input to be hidden, can I use CSS display: none or do I need to use an input type=hidden?

I have a long form and depending on certain parameters, some fields may be hidden. I can either write this pseudocode:
if(input is hidden) {
<input type="hidden" ... />
}
else {
<input type="text" ... />
}
Or I could simply apply a style with display:none for the fields that I want to be hidden.
The latter is easier, but is there a reason why I would want to use type="hidden" input fields rather than invisible regular fields? Is the only issue that people without CSS would see them?
It depends on whether you are filtering output based on some condition such as a logged in user. If this is the case then go for the code in your pseudocode option such like
if($var=='loggedin'):
<input type="text" name="privateFieldName" />
else:
//do not display the field
endif;
If you simply want a hidden field regardless use the html hidden input element