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=””&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”>

A crappy weekend, div and span

Man, this was an awful weekend. New medical issues decided to pop up (my feet decided to join the party and become numb like my arms). On the plus side, I did get to see the new lego movie, which was fucking awesome.

HTML blocks and layout

I actually accidentally already learned about <span> and <div> earlier, because I had seen span a million times and then had to use it for styling outlines, but yolo we’ll cover it again. It turns out HTML elements can be one of two things – block level elements, or inline elements.

Block level – Typically start and end with a new line when displayed in a browser. Examples include <p>, <h1>, and <div>

Inline – Typically displayed without starting a new line. Examples include <b>, <td>, <a> and <span>

<div> is a block level element that can be used as a container for grouping other HTML elements. Because it is a block level element, the browser will display a line before and after it. It’s mainly used with CSS to style attributes to large blocks of content.

<div class=“firstlist”>

<h1>What’s good in the hood</h1>

<p>This whole thing will be styled</p>


Now <span>, however, is a inline element, meaning that there’s no line displayed before and after it. It is used as a container for text, to style parts of text.

<p> This is a good example of a <span id=“super”>super enthusiastic</span> part of my sentence </p>

In the examples above, you can see I linked them to id’s and classes, which I’d then use in my style sheet to style the sections their containing.