How do I show text in text field? - html

I used <s:iterator> tag to display checkboxs and text fields:
<s:iterator value="paramMapSimple" var="param" status="iteratorStatus">
<tr>
<td>
<input type="checkbox" name="params" key_id="<s:property value="#iteratorStatus.index "/>" value = "<s:property value="#param.key "/>"
<s:iterator value="params" var="app">
<s:if test="#app.substring(0,1)==#param.key">
checked
</s:if>
</s:iterator>/>
</td>
<td>
<input type="text" text_id="<s:property value="#iteratorStatus.index "/>" >
</td>
</tr>
params of type String[] stores the index and input text which have been checked, e.g., if the first and second checkboxes are checked, and the user input "paramName1" and "paramName2" in the text field, respectively, then params is: {1#paramName1, 2#paramName2}, and if the user check a checkbox but doesn't input anything, then default value will be stored, e.g., if the first and second checkboxes are checked, and the user only input "paramName1" for the first checkbox, then params is: {1#paramName1, 2#defaultParamName2}.
What I want is: if a checkbox is checked, then the text field shows the text input by the user (if the user doesn't input, shows the default value), otherwise, shows the default value.

In HTML, you can actually use a textarea:
For example:
<textarea rows="4" cols="50">
The text you want to put here!
</textarea>
You can refer to HTML textarea tag
You can also use a placeholder:
For example:
<form action="submit.php">
<label for="phone">Enter a phone number:</label><br><br>
<input type="tel" id="phone" name="phone" placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br>
<small>Format: 123-45-678</small><br><br>
<input type="submit">
</form>
This will generate a hint text in the textbox!
You can refer more at HTML input placeholder

Related

Can't get textarea value

I'm trying to get the textarea value from a HTML form with Go, but it always returns as blank/null.
HTML form:
<form method="POST" action="/tickets/" name="ticketForm">
<textarea rows="3" cols="50" class="form-control" name="ticketDescription" id="ticketDescription" form="ticketForm" required> </textarea>
</form>
Golang method to capture form data:
inputDescription := r.PostFormValue("ticketDescription")
If I choose ' input="text" ', for example, it gives me the value. It's just from textarea that goes with blank/null. I've used "fmt.Println(inputDescription)" just to see if Go is retrieving the value, and it goes as a blank value too.
The form attribute of <textarea> must be the id attribute of a <form>, not name. Also, form is not necessary if the <textarea> is inside the <form>.
Since in your example your <form> has no id attribute and you provided form for your <textarea>, its value will not be sent when the form is submitted.
So do it like this:
<form method="POST" action="/tickets/" name="ticketForm">
<textarea name="ticketDescription" id="ticketDescription" required> </textarea>
</form>
Or:
<form method="POST" action="/tickets/" id="ticketForm">
</form>
<textarea name="ticketDescription" id="ticketDescription"
form="ticketForm" required> </textarea>
Also don't forget that in your handler you must call Request.ParseForm() before you can access form values (Request.Form), or use Request.FormValue() or Request.PostFormValue() (which call Request.Parseform() if necessary).

How to re-populate textarea with the user's comment, after form is resubmitted? (Using Html & PHP)

A form loads and user enters their data. Form is submitted, with unrelated errors and the form page needs to be reloaded. I want to re-refill (re-populate) the Textarea with the user's prior comment data.
I figured out how to repopulate fields of type=text and type=checkbox. I don't see any way to pass data to the form to put into the textarea. Text & checkbox have value="" and "checked" which work.
Solution: the area between the textarea attributes and textarea close tag, is text that loads into the textarea as an initial value.
Here's the textarea options on 3wschools:
https://www.w3schools.com/tags/tag_textarea.asp
I made a snippet. I can fill the address text field using value="Sunshine Lane". What can be used to pass to Textarea to fill it?
<form action="Online/DonateOnline.php" method="post" target="_self">
<label for "dcomments">Comments</label><span>
<textarea name="dcomments" id="dcomments" cols="100" rows="3"></textarea></span>
<br>
<br>
<!-- this text field works -->
<label for "address1">Address1*</label><span>
<input value="Sunshine Land"
name="address1" id="address1" type="address1" size="80" ></span>
<br>
<br>
<span>
<input type="submit" name="SubmitDForm" id="SubmitDForm" value="Continue" >
</span>
</form>
---------------------------------
The only thing I see so far is to use ajax. But I don't know ajax & don't even know if it's set up on this system.
Re-populating radio buttons and selection option in a form
Regarding the textarea to be repopulated, assuming that the snippet from the code is the php file,
then a tiny php addition, like this:
<?php isset($_POST['dcomments']) ? $dc = $_POST['dcomments'] : $dc = ''; ?>
<form action="Online/DonateOnline.php" method="post" target="_self">
<label for "dcomments">Comments</label><span>
<textarea name="dcomments" id="dcomments" cols="100" rows="3"><?php echo $dc; ?></textarea></span>
<!-- this text field works --> <label for "demail">Email*</label>
<span> <input value="something#test.org" name="demail" id="demail" type="email" size="80" ></span>
<br> <br> <span> <input type="submit" name="SubmitDForm" id="SubmitDForm" value="Continue" >
</span> </form>

Bad Input type email, creating a text input

I am getting the error "Bad input type email,creating a text input".Here below are the question specifications and my code. I am not getting exactly what constraints I am missing out or going wrong.
Question Description:
When creating the code for your form, you must use the HTML5 tags that are appropriate to replicate the form and fulfill all the specifications listed.
Code the form with autocomplete active.
The Name field you create should have autofocus, placeholder text, and be required. Don't forget to select the appropriate type for this field as well as all the fields that follow.
The Telephone field should have placeholder text, a pattern to restrict entry, and be required. Pattern should be of the type [ Pattern: 1-234-567-8910 ]
The Email address field should have placeholder text and allow multiple entries. This field should also be required.
The Books field should have a data list. You can select the content you would like to list.The Quantity (Maximum 5) field should have a minimum value of 1 and a maximum value of 5.
Code:
<html>
<head>
<style>
h2{
color:blue;
}
h4{
color:light blue;
font-style:italic;
}
</style>
</head>
<body>
<h2>A Simple Form</h2>
<h4>Form Fundamentals</h4>
<form method="get" action="" autocomplete="on">
<fieldset>
<legend>Customer Info</legend>
Name: <input type="text" autofocus="on" required placeholder="Enter your name"><br>
Telephone: <input type="text" pattern="[0-9]{1}[0-9]{3}[0-9]{3}[0-9]{4}" placeholder="Pattern: 1-234-567-8910" required><br>
Email address: <input type="email" placeholder="Enter your email address" multiple="multiple" required/>
</fieldset>
<fieldset>
<legend>Books</legend>
<input list="books">
<datalist id="books">
<option>abc</option>
</datalist>
Quantity(Maximum 5):<input type="number" min="1" max="5">
</fieldset>
<input type="submit">
</form>
</body>
Maybe you get the error because of the forward slash (/) after the required in input tag of Gmail.

HTML Input - already filled in text

I was wondering, is there a way to put text into an input field?
What i've got now is a placeholder, but that's actually an empty inputfield. So that's not what i'm looking for.
I'm looking for an (kind of) placeholder that's actually filled in into the input field, so not "background text"
This is with placeholder:
And this is what i want:
Is there any way to do this?
The value content attribute gives the default value of the input element.
- http://www.w3.org/TR/html5/forms.html#attr-input-value
To set the default value of an input element, use the value attribute.
<input type="text" value="default value">
All you have to do is use the value attribute of input tags:
<input type="text" value="Your Value" />
Or, in the case of a textarea:
<textarea>Your Value</textarea>
You seem to look for the input attribute value, "the initial value of the control"?
<input type="text" value="Morlodenhof 7" />
https://developer.mozilla.org/de/docs/Web/HTML/Element/Input#attr-value
<input type="text" value="Your value">
Use the value attribute for the pre filled in values.
TO give the prefill value in HTML Side as below:
HTML:
<input type="text" id="abc" value="any value">
JQUERY:
$(document).ready(function ()
{
$("#abc").val('any value');
});

HTML input field hint

I want to provide the user with a hint on what he needs to enter into my text field. However, when I set the value, it does not disappear once a user clicks on the text field. How can you make it disappear?
<form action="input_password.htm">
<p>Username:<br><input name="Username" value="Enter username.." type="text" size="20" maxlength="20"></p>
</form>
With a bit of JavaScript:
<input
value="Enter username..."
onfocus="if (this.value === 'Enter username...') this.value=''" ... />
HTML5 has a nice attribute for this, called placeholder:
<input placeholder="Enter username.." ... />
but this attribute is not supported in old browsers.
the best way to give a hint is placeholder like this:
<input.... placeholder="hint".../>
You'd need attach an onFocus event to the input field via Javascript:
<input type="text" onfocus="this.value=''" value="..." ... />
I think for your situation, the easy and simple for your html input , you can
probably add the attribute title
<input name="Username" value="Enter username.." type="text" size="20" maxlength="20" title="enter username">
With HTML5, you can now use the placeholder attribute like this:
<form action="demo_form.asp">
<input type="text" name="fname" placeholder="First name"><br>
<input type="text" name="lname" placeholder="Last name"><br>
<input type="submit" value="Submit">
</form>
http://www.w3schools.com/tags/att_input_placeholder.asp
I have the same problem, and I have add this code to my application and its work fine for me.
step -1 : added the jquery.placeholder.js plugin
step -2 :write the below code in your area.
$(function () {
$('input, textarea').placeholder();
});
And now I can see placeholders on the input boxes!
This is exactly what you want
$(document).tooltip({ selector: "[title]",
placement: "top",
trigger: "focus",
animation: false});
<form id="form">
<label for="myinput1">Browser tooltip appears on hover but disappears on clicking the input field. But this one persists while user is typing within the field</label>
<input id="myinput1" type="text" title="This tooltip persists" />
<input id="myinput2" type="text" title="This one also" />
</form>
[ref]
If you mean like a text in the background, I'd say you use a label with the input field and position it on the input using CSS, of course. With JS, you fade out the label when the input receives values and fade it in when the input is empty. In this way, it is not possible for the user to submit the description, whether by accident or intent.
If you don't insist on the hint being displayed inside the input field, a modern solution would use a label element with the for attribute referring to the id of the input field, like this:
<form action="input_password.htm">
<label for="username" title="This is your user name...">Username: </label><input id="username" name="Username" type="text" size="20" maxlength="20"></p>
</form>
If you click the label, the input field will get the input focus.
If you hover over the label, it will show a longer explanation.
Generally the label should describe well enough what the user has to enter (in the case of user name it should be very much obvious).
Define tooltip text
<input type="text" id="firstname" name="firstname" tooltipText="Type in your firstname in this box">
Initialize and configure the script
<script type="text/javascript">
var tooltipObj = new DHTMLgoodies_formTooltip();
tooltipObj.setTooltipPosition('right');
tooltipObj.setPageBgColor('#EEE');
tooltipObj.setCloseMessage('Exit');
tooltipObj.initFormFieldTooltip();
</script>