HTML/CSS普段書かないインフラエンジニアなので、これだけしかやっていないのに結構時間がかかってしまった。。。
あとQiitaにどうやってまとめればいいかもわからない。色々試行錯誤だな～💦

表示

Sign-upのボタン上にカーソルを持っていくと色が変わるようにもしてみました。

コード

test.html

<!doctype html>
<html lang="ja">

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>formのテスト</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <form action="" method="post" class="sign-up-group">
            <div id="sign-up-icon">
                <img src="contact_user_add_user_new_user_icon_250756.png">
            </div>
            <h1 id="sign-up-title">Please Sign-up</h1>
            <div class="sign-up-form">
                <input type="text" id="username" autocomplete="on" placeholder="Username" required="" class="sign-up-content">
            </div>
            <div class="sign-up-form">
                <input type="password" id="password" autocomplete="off" placeholder="Password" required="" class="sign-up-content">
            </div>
            <div id="submit-form">
                <button id="sign-up-button" type="submit">Sign-up</button>
            </div>
        </form>
    </body>
 
</html>

style.css

#sign-up-icon {
    text-align: center;
}

#sign-up-title{
    text-align: center;
    font-family: serif;
}

.sign-up-group {
    width: fit-content;
    margin: auto;
    padding: 3%;
}

.sign-up-form {
    padding-top: 3%;
    width: fit-content;
    margin:auto;
}

.sign-up-content {
    border-radius: 4px;
    font-family: serif;
}

#submit-form{
    text-align: center;
    padding-top: 5%;
}

#sign-up-button {
    color: white;
    background-color: blue;   
    width: 77%;
    border-radius: 4px;
    font-family: serif;
}

#sign-up-button:hover {
    background-color: midnightblue;
}

学んだこと（箇条書き）

inputでautocompleteをonに設定するとWebブラウザ側で「同じ入力フィールドに入力された以前の値が呼び出されるようになる」以下のように。逆にoffにするとこれが実装されなくなるみたいです。
inputでrequiredを設定しておくと、入力がマストとなる。
inputのplaceholderを記入しておくと、入力欄にそれが表示されるようになる。
inputのtypeでpasswordを指定すると、入力中"●"の表記になる。
buttonとinputでtype="submit"が指定出来るが、buttonでやるのがベターみたい。
classをCSSで指定するときは".class名"とする。idをCSSで指定するときは"#id名"と指定する。
CSSで"class名/id名:hover"とすることで、マウスカーソルが上に来た時の変化を示せるようになる。

参考