DEV Community

loading...

Thinking About: HTML Forms for a Not Instagram App

Jeff Mitchell
I'm an IT generalist and junkie who's decided to dust off old coding skills and join the modern era
・3 min read

Towards a "Not Instagram" Web App

I'm beginning the planning process of planning my own Instagram app.  This is a daunting task and I doubt I'll ever come close to building more of a subset of what Instagram current feature set.  I want to build my own thing because the real Instagram drove me away about six months ago, as it's become nothing but an advertising machine for big brands.  Long gone are the days when it was a fun photo sharing platform.  I'm sad about that, but it is what it is.

Wanting to build my own thing means learning and understanding some new concepts. This will be a difficult, but hopefully rewarding project.

An essential concept is forms in HTML, as this will enable user login from the landing page of my app.

What is an HTML Form?

Frequently, when visiting a web site, you'll be presented with a portal to login and authenticate to receive access to content on the other side.  The tool for achieving this is an HTML form.  The form allows a user to fill in such information as a username and password and click on a submit button.  There is logic connected to the submit button, typically coded using JavaScript, which checks for correctness of the information and if it passes muster, the information is sent on to the server for further action.  To quote the Mozilla Developer Network:

An HTML form on a web page is nothing more than a convenient user-friendly way to configure an HTTP (Hyper-Text Transfer Protocol) request to send data to a server.  This enables the user to provide information to be delivered in the HTTP request.

How does an HTML Form Send Data?

The

HTML tag has a couple of key attributes, action, and method.

The action attribute provides a destination where the form data is to go.  It needs to be a valid relative or absolute URL (uniform resource locator).  The destination could be on a completely different server OR a sub-directory on the same web host.

If neither an action nor method attribute is present in the form definition, the destination is back to the same page where the form is present.

There are two options to choose from for the method attribute.  The first is the GET method and the second is the POST method.  The Mozilla Developer Network page, "Sending form data" has a terrific explanation of the two options that the method attribute provides.  I'm not going to attempt to re-explain all the details here.  When choosing between these methods, one key point will influence the choice.  The GET method transmits form input data in the clear as part of the request URL.  Obviously, this is not a desirable choice for a login page.  The POST method is recommended for sensitive data, forms which send a lot of data or for file uploads.  In the case of file uploads, the POST method is the only one that can be used.

What Happens on the Back End?

Once the server receives the input from the form, it's typically validated further and then passed to CGI (Common Gateway Interface), ASP (Active Server Page) or PHP (Hyper-text Pre-processor) which figures out what to do with the input. The business logic in the server scripting determines that. In the user login scenario, the main information comprising the app is sent back to the user and rendered in their browser.  In the case of an app like Instagram, the user sees the content of their account, which is served up from the backend database powering everything.

I will be choosing a framework, likely Express for NodeJS for the server needs of my "Not Instagram" app.  Form handling is tricky at the best of times, and I certainly don't have the chops to code the whole thing myself from scratch.

The Road Ahead

This little article has helped me get some thoughts out on paper (so to speak) about how HTML forms work. It's important to understand their purpose and the concepts behind them.  I hope I've left you with some useful breadcrumbs for your own coding projects.  The next step for me is to go away and figure out the milestones in my road to an Instagram replacement.  I'll be sharing more along the way.  Comments, tips, and constructive criticism would be appreciated if you're so inclined.

Discussion (0)