03-week Intermediate HTML

This week the tutorials focus on developing our skills to create forms

These are the exercises:

We also were tasked with recreating a form from any chosen website. I choose Facebook’s sign up page.

I create my own version using several inputs, which included, email, password, and radio.

Using the email input ensures that the user is entering data that includes the “@” symbol while the password input allows the developer to add restrictions to increase the security of the password.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Form Remake </title>
</head>

<body>
    <h1>Sign up</h1>
    <h3>It's quick and easy</h3>
    <form action="">

        <div>
            <input name="first" id="first" type="text" placeholder="First name" required>
            <input type="text" name="last" placeholder="Last name" required>
        </div>


       

        <div>
            <input type="email" name="email" placeholder="Mobile number or email" pattern=".{5,10}" required>
        </div>

        <div>

            <input type="password" name="password" placeholder="New Password" required
                title="Password must be between 5 and 10 characters">
        </div>

        <div>
            <h4>Birthday</h4>
            <label for="Birthday">
                <select name="month" id="">
                    <option value="">Jan</option>
                    <option value="">Feb</option>
                    <option value="">Mar</option>
                </select>

                <select name="day" id="">
                    <option value="">01</option>
                    <option value="">02</option>
                    <option value="">03</option>
                </select>

                <select name="year" id="">
                    <option value="">1999</option>
                    <option value="">1998</option>
                    <option value="">1997</option>
                </select>

            </label>
        </div>
        <div>
                <label for="male">Male</label>
                <input id="male" name="gender" type="radio" value="male">
                <label for="female">Female</label>
                <input type="radio" name="gender" id="female">
                <label for="other">Custom</label>
                <input type="radio" id="Custom" name="gender" value="Custom">
            </div>

            <p>By clicking Sign Up, you agree to our <a href="https://www.facebook.com/legal/terms/update">Terms</a>, <a href="https://www.facebook.com/about/privacy/update">Data Policy</a> and <a href="https://www.facebook.com/policies/cookies/">Cookies Policy</a>. You may receive SMS Notifications from us and can opt out any time.</p>

            <form action="https://facebook.com">
                <button>Sign Up</button>
            </form>
    </form>

    <hr>
    
<div><p><a href="https://www.facebook.com/pages/creation/">Create a Page</a> for a celebrity, band or business</div>
</body>

</html>

Leave a Reply Cancel reply