<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.
Related
Is there any way to validate inputs in the form using HMTL?
For example:
<input type="text" class="input-text error"
aria-required="true" placeholder="Enter your name *"
aria-invalid="true" required />
If user adds a special character to input, an error message saying "Characters are not allowed" should be shown below the input box.
First of all, client-side form validation is the greatest feature coming with the HTML5. Client-side form validation helps you to ensure data submitted matches the requirements. To get more detail about it you can visit here.
Important Note
Client-side form validation is an initial check, You should not use data coming from the form on the server side without checking it. It just a feature for good user experience. Because client-side validation is too easy to manipulate, so users can still easily send data that you do not want to on your server.
Solution
In this question, the best solution is; using HTML attribute pattern. The pattern attribute defines a regular expression the form control's value should match. To get more detail about pattern attribute you can visit the this page.
Below regexp you need.
^[a-zA-Z0-9]{5,12}$
It works like that;
It should contains only alphanumeric.
Minumum 5 and maximum 10
character.
You can use below code to integrate it with input field.
<form action="">
<input type="text" name="name" required
pattern="[a-zA-Z0-9]{5,12}" title="No special character">
<input type="submit">
</form>
Usually, to check inputs from html tags, you can create a javascript function to check your needs which is called everytime the user type in your input with the "onkeyup()" function.
The "onkeyup" keyword will trigger the function everytime user type in your field
<input type="text" onkeyup="myFunctionToCheck()">
<script>
myFunctionToCheck(){
//Here check your needs
}
</script>
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.
Is there a way to use HTML5's built in form validation in input elements that are NOT required? I.e. is there a way to validate an HTML5 input if and only if the field has an actual value?
For example, I'd like to use the following markup to check whether some_name is a URL if and only if the user actually enters a value in the input. If the user leaves the input blank, the form should still be able to submit as usual.
<input type="url" name="some_name" [some attribute or additional markup?]/>
Thanks very much for your help.
Use the pattern attribute that accepts javascript regular expressions.
<input type="url" name="some_name" pattern="your regular expression"/>
I know that if I want to have a html field that let's the user upload a local file I can use
<input type="file"></input>
However, let's say I am guaranteed that all images will be at a valid absolute URL to an image. How do I let the user specify that? What input type do I use?
You may have to use:
<input type="text"></input>
HTML5 has url input types:
<input type="url"></input>
Consult the MDN on inputs for more inforation.
If the user is just specifying a URL at which you can find the image, then all they're really entering is text. There's no input element that's specific for a URL.
<input type="text" />
What you do with that text is another story entirely. There's no way for the HTML to validate that it's a URL for an image, a valid URL, etc. That's all stuff you'd have to do in code.
I am using the the "GET" method in a form on my website. For some reason it is passing the value of the submit button to the url. Why is this happening? What am I doing wrong?
Form:
<form method="GET" action="searcht1.php">
<input type="text" name="search"/>
<input type="submit" name="submit">
</form>
Url:
searcht1.php?search=colin+pacelli&submit=Submit
It's supposed to happen. If you don't want that, do not define name attribute on the button. You probably want value instead, to show the user what the button is for.
Also, this question has nothing to do with PHP; it is purely about HTML semantics.
The reason is that the name attribute makes the submit button a “successful control” (in HTML 4.01 terminology) when it is used for form submission. This causes the name=value pair from it to be included in the form data.
Note that in your case, this data is name=foo where foo is the browser-dependent default value of the button. It could be submit, or it could be Lähetä kysely, or something exotic. You can, and normally should, use the value attribute to set this value, since it determines the text displayed in the button. It’s usually not desirable to have a submit button on your English-language appear with e.g. some text in Japanese just because a Japanese-language browser is being used.
So as others have written, the solution (if this is a problem) is to remove the name attribute. But since the value attribute should normally be used, you can make two changes simultaneously by just replacing the attribute name name by the name value, though you might also capitalize the word shown:
<input type="submit" value="Submit">
Try to remove name attribute from submit input
remove the name attribute of the button.....