index.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <!--PHOSPHOR ICONS-->
    <script src="https://unpkg.com/@phosphor-icons/web"></script>
    <title>Issue tracker</title>
</head>
<body>
    <div class="container">
        <form id="myForm" class="teller">
            <h1>Add new issue</h1>
            <label for="problem">Name the problem :</label>
            <input type="text" id="problem" placeholder="Printer don't work...">
            <label for="severity-select">Severity :</label>
            <select name="severity" id="severity-select">
                <option>Please choose an option</option>
                <option value="low">Low</option>
                <option value="middle">Middle</option>
                <option value="high">High</option>
            </select>
            <label for="category-select">Issue is relative to :</label>
            <select name="category" id="category-select">
                <option value="printer">Printer</option>
                <option value="computer">Computer</option>
                <option value="connection">Connection</option>
            </select>
            <label for="describe">Explain your issue :</label>
            <textarea  rows="5" cols="33" maxlength="250" id="describe" type="describe" autocomplete="off" spellcheck="false" wrap="hard" required></textarea>
            <span class="lengthChecker"></span>
            <label for="contact">Contact me at :</label>
            <input type="email" id="contact" placeholder="exemple@mail.com">
            <button id="submit" type="submit">Submit issue</button>
        </form>
        <aside id="response" class="insert">
        </aside>
    </div>
    <script src="script.js"></script>
</body>
</html>