HTML/CSSのお勉強【form/inputとか】

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

# 表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/66f2653e-9b09-75d4-030d-4f2d549b07c3.png)
Sign-upのボタン上にカーソルを持っていくと色が変わるようにもしてみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/0854b1ba-a26d-b1b3-64d0-ffbfbffedd37.png)


# コード
```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にするとこれが実装されなくなるみたいです。
![input01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/cc2c634f-22fc-3926-111e-4da89de5bfc4.png)
- inputでrequiredを設定しておくと、入力がマストとなる。
- inputのplaceholderを記入しておくと、入力欄にそれが表示されるようになる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/65fb2733-a74c-f392-dfb7-b236436385b8.png)
- inputのtypeでpasswordを指定すると、入力中"●"の表記になる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/cb9e7355-0d88-84f4-1bb3-2c545f629955.png)
- buttonとinputでtype="submit"が指定出来るが、buttonでやるのがベターみたい。
- classをCSSで指定するときは".class名"とする。idをCSSで指定するときは"#id名"と指定する。
- CSSで"class名/id名:hover"とすることで、マウスカーソルが上に来た時の変化を示せるようになる。

# 参考
https://developer.mozilla.org/ja/docs/Web/HTML/Element/form

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/CSS_basics

https://chiiweb.net/media/centering/

https://developer.mozilla.org/ja/docs/Web/HTML/Element/button

https://icon-icons.com/ja/%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3/%E9%80%A3%E7%B5%A1%E5%85%88-%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC-%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%81%AE%E8%BF%BD%E5%8A%A0-%E6%96%B0%E8%A6%8F%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC/250756