Join Joseph Lowery for an in-depth discussion in this video Creating the basic fields, part of Creating Photo Card Titles with HTML5.
Let's start with the basic form tag. I'll give it an ID of textForm and then set the action to the same page. Now, let's make some room for that form content. Next, we'll isolate this section of the form-- there will be three different sections in all--with a fieldset and legend combo.
I'll enter "Create your text" as the legend here. Now I am going to put the first of three form controls, a simple text box for entering a caption. We'll use an HTML5 attribute placeholder to provide a hint for the user and leave the value blank. I am going to put each of these form controls on their own line, so I'll start the coding with a paragraph tag. We'll enter in our label first, and I'll use the for attribute and set it equal to the ID of the text box, which happens to be called textBox, and then enter my actual label, text with a semicolon, and then after the closing label tag, which Aptana has so nicely provided for us, we'll put in our input tag.
And this will be a basic text input type, with, as I said, an id of textBox, a placeholder. This is an HTML5 attribute that puts a little bit of a hinting text into the middle of the text field. We'll suggest to them that they enter a caption, and I'm going to set the value to an empty string. Okay, let's close the input tag, and that's the first of our three, but let me go below it. And in fact, I am going to scroll down somewhat so we're not right at the bottom of the page anymore. There we are.
Now let's make it possible for the user to change the font. Of course, you don't leave it completely up to the user. That would open the door to errors galore; we're going to use a select list. I'll limit the options to the basic fonts and then add a nonbasic one, just for fun. So we'll start with our paragraph tag, and next comes the label. Again, I'll use the for attribute, and the id of this select field is textFont, and the label is Text Font in two words with a colon.
Okay, after the label, I'll enter in my opening select tag, give it my id of textFont, and then we are going to enter in a series of options. As I said, we're going to use the basic font names. Of course you can substitute other font families, but I just want to use the basics to illustrate the concept. So option value = serif, and we'll enter in serif as the font.
Next option is going to be sans-serif. Following sans-serif will be cursive. Fantasy. Finally, we'll enter the last of our generic fonts: monospace. Now, for a nongeneric one I am going to use Impact, a very big bold font which works really well with certain types of effects that we'll be implementing.
Okay, our second form field is now done. Again, I'll scroll down, and let's add our third paragraph tag for our third field, which will be one that will allow the user to change the font size. We'll enter in the label, with the for attribute set to textSize, and the text label itself will be Text Size:. And now we'll put in a new input tag. And initially, we're going to start it out as a standard text field, so it will be type="text" and give it an id of textSize and an initial value of 50.
This last entry, as a standard text input field, is not too exciting or particularly user-friendly. However, in the next lesson, we'll convert it and other fields to an HTML5 slider and really boost the user experience.
Check out the rest of the HTML5 Projects series.
- Setting up a caption submission form
- Creating basic text entry fields
- Integrating color pickers in the form
- Applying text effects like shadows and gradients