4
\$\begingroup\$

I'm creating a simple registration form for a Linux installation party I'm organizing.

Although I'm a decent programmer, I rarely create HTML files. I want to know if this form is safe for my users and if it will work on most devices. Am I following all the good web development practices? Is my code pure HTML5?

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <meta name="description" content="Installation fest inscription form"> 
  <meta name="author" content="name - [email protected]"> 
  <title>Installfest Inscription</title>
</head>

<body>
  <h1>Installfest Inscription</h1>
  <form action="/action_page" method="post">               
        First name:<br>  
        <input type="text" name="firstname"><br>
        Last name:<br>
        <input type="text" name="lastname">
        Laptop model:<br>
        <input type="text" name="model">   
  </form>
</body>
</html>

Thanks!

\$\endgroup\$

2 Answers 2

Reset to default
3
\$\begingroup\$

I wanted to know if this form is safe for my users and if it will work on most devices.

Your HTML form will definitely work on all devices. But as for being 'safe for users', that would probably depend on your backend code you are using to submit your form eg PHP. You would use PHP (or some other backend language eg Python) to handle the submitted data. The browser would decide if the form is safe enough based on how safely and securely you encrypt and submit the data.

Am I following all the good web development practices?

You have followed most of the good programming practices for web development. Though there aren't many things I can improve on for such a simple webpage, there are some minor problems:

  • It is more conventional to use <br /> not <br> because it is a self-closing tag. Adding the / in the tag tells the browser not to waste time looking for the (non-existent) closing </br> tag.
  • And it is not a good idea to place your input labels as 'naked' untagged text. Instead, use label tags:
<label for="firstname">Firstname:</label>
<input type="text" name="firstname" />
  • Web developers usually write the doctype in lowercase, like this:
<!doctype html>

not this:

<!DOCTYPE HTML>

But there is no major difference.

Is my code pure HTML5?

This is all pure HTML5, I see no other programming language (eg JS) or markup language (eg CSS) in your sample code.

\$\endgroup\$
2
  • 1
    \$\begingroup\$ W3C recommends <!DOCTYPE html>. HTML doctype declaration \$\endgroup\$
    – Ray Butterworth
    Commented Feb 1, 2020 at 14:34
  • \$\begingroup\$ In HTML 5 it's completely irrelevant if you use <br> or <br />. The browser doesn't go looking for a closing </br>, because It knows which elements are supposed to be empty. \$\endgroup\$
    – RoToRa
    Commented Feb 5, 2020 at 11:09
4
\$\begingroup\$

It would help Google and other crawlers if the <head> also included:

<link rel="canonical" href="https://appropriate/url" />
<meta name="description"
    content="Brief description that will appear in Google search results." />

In terms of coding style, using <br> (which should be <br />), isn't pretty. It also indicates that you are thinking of display format while writing HTML. HTML code is for saying what things are, not how they should be displayed.

For labelled input, one should use the <label> tag to definitively associate the label with the input area. This will help software that reads your page, whether for SEO, or for accessibility For someone that can't see well, voice software can know for sure what the input field's label is, whereas with your original code it would have to guess.

There are two common ways of doing this.

By putting the input tag inside the label:

<label>
    Firstname: <input type="text" name="firstname" />
</label>
...

or by listing the labels and inputs separately:

<label for="firstname">Firstname:</label>
...

<input type="text" name="firstname" />
...

The results are the same, so use whichever feels most appropriate for your code. Either way though, do not include anything other than the label text (e.g. don't add an <a> link inside the <label>).

Finally, if you don't like the default formatting that this produces, use CSS in the <head><style> section to improve the appearance.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.