Form city, population me

Goddamn James Blake is amazing. Listen to it while reading this, imaginary internet friend.

I started in on learning forms today, and was feeling frantic, having trouble remembering things, feeling like I was going too fast. I felt this way a bit yesterday when making the construction web page, but that was ok because I was trying things out that I had already learned. For this I needed to learn theory first before I could put it into practice. I realized the problem was because I wasn’t taking notes like I normally do for this blog. I had forgotten that the main reason I’m doing this is not just to track my progress, but also to help me analyze and remember what I’m learning.

Ok, so I’m super pumped to learn about forms because my company offers web-to-leads functionality, and while I understand the gist of it, I never felt that solid on it. The best part about learning coding is that I’m slowly understanding a more and more of how the internet and websites work. It’s like learning spanish and catching little bits and pieces of someone’s conversation.

For forms, the first thing you’ll need is the <form> element, which the entire form will sit inside. Then, you can use the <input> element for each thing you want someone to enter. You use its “type” attribute to set what kind of input it will be (like text, password, radio buttons, etc.) as well as for making a submit button. There’s also a name attribute, which I know from work (and not the W3C tutorial) is how you direct where that input goes. For example, if I had an input for the first name of a lead, I can set the name attribute to make sure the input goes into that field in the app.

Now, for building the form you want to make sure that you put the text that describes each input in between <label> tags. There are two reasons for this.

1. Because apparently it’s good practice in writing HTML. This tag describes the purpose of the text, which is to label a form input.

2. If someone clicks on that text, and you’re using the for attribute in the label to link it to the input, for a radio button or checkbox input, it automatically selects that option for you.

Now, for the second one, I’m having trouble finding a use for using the “for” attribute for text fields. Apparently it’s just to link the label with the input, in case they’re far away from each other on the page.

For placeholder text in your text input, you can use the placeholder attribute in your input element.

<input type=“text” name=“fname” placeholder=“First Name”>

This is the current result:

Andddd here’s the html for that:

<div id=”form”>
<p id=”formp”> Want to learn more? Submit your <a href=”http://adminpilot.s3.amazonaws.com/bodytuck/files/2012/04/butt1.jpg”&gt; information </a> here!</p>
<form id=”form” action=”html_form_action.asp”>
<label>First Name:</label> <input type=”text” name=”fname” placeholder=”First Name”><br />
<label>Last Name:</label> <input type=”text” name=”lname” placeholder=”Last Name”><br />
<label>Password:</label> <input type=”password” name=”password” placeholder=”Password”><br />
<label>Favorite Gender?</label><br />
<input type=”checkbox” name=”gender” id=”male” value=”male”> <label for=”male”>Male</label> <br />
<input type=”checkbox” name=”gender” id=”female” value=”female”><label for=”female”><label for=”female”>Female
</label><br />
<input type=”submit” name=”submit”>
</form>