HTML — P5- Problems with HTML

Where plain markup falls short

There are a few issues that HTML cannot solve. HTML is great for displaying small information to a user, but it lacks in displaying a large number of content: think about an e-commerce website. Those websites might have hundreds of thousands of item numbers and each of those item numbers might produce a single page. Do you think that each page is created by a person? Of course not. Next, think about a form on a website. What happens when you fill out your information and click submit? Magic? HTML cannot answer those questions for us. We’ll get answers to those questions later.

Forms

Besides providing information to the user, there is one page that is available on 99% of the web-pages: the contact page. The contact page might list the phone number of the business, the business address, and usually a form. The form allows you to communicate with the website owner. But how is this accomplished?

HTML provides you with the tools for creating the form. To create a form, copy the contents below into your IDE and open the html file in your browser.

<form action="process-form.php" enctype="multipart/form-data"> 
    <div>
        Input Text: <input type="text" name="text_name" /> 
    </div>
    <div>
        Textarea: <textarea name="text_area">Textarea content</textarea> 
    </div>
    <div>
        <input type="submit" name="submit" value="Submit" /> 
    </div> 
</form>

You should get a form with an input field, a text area, and a submit button. Don’t worry about what the form looks like right now; we’ll focus on that in a later article. You should get a form that looks like the one below.

HTML provides you with the ability to enter text into the input fields and click submit. Clicking on Submit will take you to a page that doesn’t yet exist: process-form.php. How did the browser know to redirect you to the process-form.php page? It looked for the action attribute that’s present in the form tag. The trigger was pressing the submit button. The process-form.php is the page that processes the form. We’ll cover processing of the form in later articles.

There is currently nothing in HTML’s arsenal that handles form submissions. With PHP and MySQL, we’ll be able to capture the form field submissions and pretty much have free-reign over the data. We can store the data into a database or send an email with the data that was submitted.

Storing and Retrieving Data

What kind of data are we talking about? Any kind of data that’s displayed to the user. These could be articles in a blog, products in an e-commerce website, form submissions, etc.

As was previously mentioned, HTML provides no mechanism for storing a form submission into a database. Think of a database like a spreadsheet. It will have rows and columns. The columns contain the categories and the rows store the data.

It also provides no mechanism to connect to a database and retrieve data. If working with an SQL database, your language of choice for retrieving data will be MySQL. MySQL can be embedded into PHP effectively establishing the communication with the database and retrieving the data from it.

The Overall Scale of the Website

Image an e-commerce website. If HTML was the only tool that a particular business had to use, the business would have to hire hundreds of employees to maintain the creation and deletion of pages. The maintainability of large e-commerce conglomerates would not be possible. Not to mention that people would be unable to purchase products through the website because HTML doesn’t provide that feature either.

You need a programming language that is able to generate pages based on certain criteria. To give you a sample solution to our e-commerce problem, a developer might create one page. That page accepts one variable; think of a variable as a storage container that can carry a certain type of input. For the sake of this example, our variable will store numbers. By passing a different number, we can use MySQL to access the database and retrieve the contents of the row that has an id column matching that variable. Every time a new number is passed, the contents change. You can then store one or a million entries inside your database and the same one-page script will be used to display the data.

To finish off, there’s really nothing wrong with HTML. HTML serves the exact purpose that it was designed for. Once you need to write dynamic applications, you’ll need to use an actual programming language. HTML gets a lot of heat, but it really shouldn’t. It would be the same type of scenario if someone attacked CSS for not being able to submit forms.

 HTML Series

Continue your HTML Learning.

HTML — P4: HTML5

HTML evolves into a richer web standard

HTML — HTML5

Part four of our HTML fundamentals series introduces HTML5—the modern standard that added semantic tags (<header>, <article>, <section>), native audio–video, smarter forms, canvas graphics, and JavaScript-powered APIs for storage, geolocation, and more.

HTML — P5- Problems with HTML

Where plain markup falls short

HTML — P5: Problems with HTML

Part five of our HTML fundamentals series confronts the language’s built-in limitations. Explore layout pain points, styling inflexibility, lack of state, inconsistent browser support, and why modern devs reach for CSS, JavaScript, and frameworks to fill the gaps.

Leave a Reply