Tip:
Highlight text to annotate it
X
Today's topic is about sticky forms or re-displaying the submission
values submitted in a form by our user. A sticky form
is a standard HTML form that remembers
what values the end user typed into the form fields.
Redisplaying user-submitted values in a form is a customary feature now in forms.
If you are requiring your user to resubmit a form after filling
it out and the values they submitted are incorrect, you do not want them
to have to retype the values again for your form.
The file that I have open is the register.php file
If I go ahead and preview this in Firefox
these are the input form fields
that we want to make so that when I type in a value
it will remain there in case I made an error in my form.
and I don’t have to come back and retype this information into here.
So let’s go ahead a look at
our form input fields. So here’s are form
in my register.php file.
To preset what the user entered into a text input field,
we will use the value attribute. So right here in my [first_name] form field
we have our first_name and
here is our value attribute. This is
this is the information that we are going to want to put into our value attribute.
This presets what the user entered into a
text input field.
The HTML value attribute is used to set the text
that appears in the input field by default.
One of the things that we have done is we have used the same name for our
form inputs to correspond with the columns in our database.
This name right here first_name
corresponds to our database. So if I open up my
database. Open my start page
Here’s my users, first_name, last_name,
my email. These are the same values we are using in our registration form.
This is also
the datatype and the length that we have assigned to these. So we have
assigned the length of 20 characters, 40, 60,
and 40 our password.
We have also set in this form field the maximum
input length in the form field equal to the maximum column length in the database.
You could have just made the size attribute the same value as the
database datatype length, but for stylistic purposes
it looks better setting the maximum input length.
For the value, we want to echo out what's in that
first_name variable. This variable will only exist if we executed
the code above [at the top of the file]
when the request method is post. If we're just displaying
a blank form, the $_POST variables will not be set. It is best
not to refer to variables unless they exist. The IF
conditional statement will check
that a variable is set before printing or outputting its value (to the browser).
We have added this check here in this code block to see if the variable is set.
So if that variable exists, then we want to echo the value from it here in the
input element to the screen.
We want to make sure that we do the exact same thing -- add in this piece of code
for the rest of the input [value] elements.
Setting the value attribute equal to what the visitors
entered into that field.
NOTE: If you have a field which is a textarea,
the HTML for textareas is a little different.
Text areas do not have value attributes. Instead a textarea
has an open and closing tag.
The default value is added as content in between the tags.
Just like the other variables, this variable is set before we echo it.
So here is my textarea
and here is my name=“message”
and here is my name=“message”
id=“message” and then here is our php code block
with our conditional statement and then we echo it out
if the variable has been set.
So let’s take a look at this code in the browser
As each field loads, there's now code in place to check if it should
have a value. So let’s go ahead and go out to Firefox
I am just to go ahead and make an error and I am not going to put in my email
address. If I say register
So we can see that our values that the user input
into our field were retained.
All that the user would now need to do is add in their email address
in. This gives you a little prompt here.
So the very first time that we load the form
into the browser. If I click on here [register tab]
the request method is not post, so the block of
code, if I go back into Dreamweaver
this block of code is not executed starting from the
if (empty). The very first time [the page] is loaded, it is using a $_GET
request
So all of this is skipped and all that is
shown in the browser is the [blank] form fields.