Back from hiatus, back to the basics

It’s been almost a month and a half since my last post. If you’ve never experienced excruciating chronic nerve pain, then I hope you never have to. I wonder, is it worse to have a broken mind and a healthy body, or a healthy mind and a broken body?

Since I’m decidedly rusty, I’m going to go back to the start and basically relearn everything I did before. Lots of the upcoming posts will likely cover the same material, but I’m glad to be doing this because it 1. will help me escape the dead end job I’m currently working, and 2. it will be nice to be making positive progress in my life again that’s something other than working to have less pain.

<p> is an example of a tag. It’s a keyword (aka a tag name) between two brackets that tells the browser what it’s dealing with, like a picture, a link, a paragraph or a list. It’s good practice to always write tags in lower case.

<p>I’m going to order delivery cookies later</p> is an example of an element. It is typically made up of an opening (start) and closing (end) tag with the content in between.

HTML = Hyper Text Mark up Language

You open and close your html code with the <!DOCTYPE html> tag, which specifies this code is HTML5. Older versions and XML have wayyy longer tags to declare them and I’m going to ignore those for now.

There are empty elements as well, such as <br> for page breaks. You don’t need to have a closing tag, just the single one is enough.

Sometimes html tags can have attributes, which provide additional information about an element. They’re always specified in the start tag, and come in name=value pairs. For example, the link tag <a> has the href attribute, which tells you what site or page or whatever it’s linking to. The values should always be in quotes. Like tags, the attributes should always be lowercase.

<a href=””>This is a link to google</a>

So just rideeeeeeee

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