How not to allow the user to create HTML using input text?

Question

I am relatively beginner in programming, I am 17 years, 2 years with programming but no experience in the job market and recently I started working more actively with HTML.

My problem is with regard to the fact that users can change the layout of my HTML site using input. For example, if they type in the field name the code <button>Teste</button>, they are able to create a button with the value "Test". I would like it as well as in Github, in case they try to do this is shown in full the <button>Teste</button> and not created a button. Below I will show in the images how it is and how I would like it to be done.

I’ve looked for questions on Stackoverflow American and Brazilian and other sources but I still haven’t found anything like what I’m looking for. I tried to reproduce what I saw in the source code of Facebook comments and Github Biography but it didn’t work.

MY WEBSITE

Entree:

Exit:

Output (Page Code):

GITHUB

Entree:

Exit:

Output (Page Code):

As you can see, in my case a div was created, in the case of Github it was created in full, only as text. I would like my template to look like Github, in other words, that the user is not allowed to change the site layout using input.

Follow my html code:

<label for="name" class="txt_settings_text">Nome:</label>
<br>
<!--Essa é a caixa onde o usuário insere o nome (Entrada)-->
<?php echo '<input id="prof_txt_name" type="text" name="name" value="'.$data['userName'].'" maxlength="35">' ?>
<!--Aqui é apenas exibido o texto (Saída)-->
<span id="prof_lbl_name" class="txt_settings_text"><?php echo $data['userName']; ?></span>

Follow my query using Mysqli:

        SELECT
            userName,
            userSurname,
            userUsername,
            userEmail,
            userPassword,
            userCountry,
            userGender,
            userPhone,
            userCellphone,
            userBio,
            userPhoto,
            userBackground,
            userRegistertime
        FROM hanabiUser
        WHERE
            userEmail = '".$_SESSION['email']."'

Besides the things I’ve already mentioned, I’ve tried:

• Quote inside the span;
• Swap span for other tags like div and p.

From now on, thank you to everyone who offers to help!

Answer 1

Instead of you forbid the user to enter code HTML in his INPUT, you can work around the problem using the function htmlentities() to escape all the typed content, for example:

$saida = htmlentities($entrada);