Here we go again! Here’s a quick recap with a basic introduction to HTML, the most basic required elements of HTML, and the common elements of HTML. As discussed in the first couple posts about web development basics, websites are built on HTML, and HTML revolves around tags. Tags are not displayed on your browser; they’re used in the code to label pieces of content.

Now we’re ready to dive into the intermediate elements of a webpage. These elements start to make your page look like you’ve put some real effort into it. Some of the most common intermediate elements include:

HTML Forms

Forms are used to collect information from a user. These can range from a simple newsletter signup that only requires an email address, to a very complex, multi-step survey. There are three basic elements that make a form work: a form tag, an input tag for data, and an input tag for submitting the form. You can also include label tags, but they are not mandatory.

Here’s an example of a simple newsletter signup form:

<form action="/signup.php" method="post">
	Email: <input name="email" type="text"> 
	<input type="submit" value="submit">
</form>

The form tag <form></form> surrounds all the inner label and input tags, and usually has two attributes: action and method.

1. Action: This attribute is used to designate the “Form Handler" file, which is typically in a server-side code language. In this example, we are using PHP. The server-side code language will differ depending on the type of server your webpage will live on. The code in the “Form Handler" file does things like input validation, error handling, saving data to a database, and more.
2. Method: This attribute specifies the HTTP method used when submitting a form. There are only two options: get or post. Explaining the differences can get pretty advanced (and could very well take up an entire blog post), but the most basic overview is:
3. "Get" is used when data needs to be requested from a website’s database.
4. "Post" is used when data needs to be saved to a website’s database.

The input tag is a self-closing tag (meaning it does not require a closing tag) that requires at least two attributes: name and type.

1. Name: This attribute is used the name the input. This name should always be unique. In other words, make sure not to name another input in the same form by the same name. Doing so can cause problems when the form is submitted to the form handler.
2. Type: This attribute is used to denote the type of input requested. There are many “types" to choose from, but we’ll stick with the basics for now:
3. Text creates the single line text input.
4. Textarea creates a text box input.

Ex: <input name="input_name" type="input_type">

The submit input is a special case that requires the attributes: type and value.

Ex: <input type="submit" value="Submit">

You can learn more about all the different input types here.

How you set up a working form usually depends on what server-side coding language you’re dealing with, so here is where we stop … for now.

HTML iframe

The iframe tag is a very interesting type of HTML tag. These tags are most commonly used to embed other websites into your site. It may be very confusing until you see an example in action, but first, let’s look at a code example:

Code :

<iframe src="https://www.website.com"></iframe>

Even though the iframe element has opening and closing tags, you do not need to add any content inside the tags because everything is set with the attributes. The bare minimum attribute you need is the “src" attribute, which tells the iframe what url to pull content from. Check out two common examples below:

Here is an example of a YouTube embed:

Code :

<iframe src="https://player.vimeo.com/video/294456503" width="100%" height="400" frameborder="0" fullscreen"="" allowfullscreen=""></iframe>

Here is an example of a Google Map embed:

Code :

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13775.54201831456!2d-81.6600102!3d30.3257744!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x4b4d0d192f643327!2sWingard!5e0!3m2!1sen!2sus!4v1566585382061!5m2!1sen!2sus" width="100%" height="400" frameborder="0" style="border:0" allowfullscreen=""></iframe>

That’s about as much as we can get into regarding elements of a webpage without really sending your head spinning, so this is it, friends. Melz, signing off.