<style>

form {

  margin:auto; /*　この行を削除すれば、フォームの配置がセンターでなく、左揃えとなります　*/

  width: 220px; /*　左右にそれぞれ20pxの余白がありますので、実際の幅は260pxになります */

  background-color: #6e91fe; /*　色コードでの色指定 */

  padding: 20px; /*　上下左右余白 */

  border: 1px solid blue; /*　枠線の太さと色 */

  border-radius: 3px; /*　枠線の角の丸み */

}

.ipw {

  display: block;

  margin:auto;

  width: 220px;

  height: 30px;

  background-color: whitesmoke;

  border: 1px solid cyan;

  margin-bottom: 0.5em; /*　単位はemでなくpxで指定しても構いません */

  font-size: 13px; 

  text-align: center; /*　centerをleftに変えれば文字が左によります　*/

}

.btn {

  display: block;

  width: 90px;

  height: 30px;

  background-color: blue;

  border: 1px solid white;

  font-size: 14px;

  color: white; /*　文字色 */

}

/*　マウスカーソルを当てたときの挙動 */

.btn:hover {

  background-color: darkblue;

</style>

<form name="myform" onsubmit="return Check()">

 <input class="ipw" type="password" name="pwd" placeholder="パスワードを入力" required>

 <input class="btn" type="submit" value="Login">

</form>

<script>

function Check() {

document.myform.action = 'https://sites.google.com/view/********/'+ document.myform.pwd.value;

 }

</script>

********の部分は、ウェブへの公開時に決めたご自身のウェブアドレス(ディレクトリ名）に変更してください　(このサイトの場合であれば、https://sites.google.com/view/mininota/となります）

.btn {     }の中に

margin: auto;を加えればボタンが中央揃えに

margin-left: auto;

margin-right: 0px;

の2行を加えればボタンが右寄せになります

<style>～</style>までのコードを削除すれば、もっともシンプルなログインフォームとなります。

青字箇所のカラー、テキストはお好きなように変更してください。ただし、オレンジ色の数値の部分を変更すると全体のバランスを取るのが難しくなることもありますが、いろいろとお試しになるとおもしろいかと思います。

色はもちろんカラーコード（#◯◯◯◯◯◯）での入力もOKです。色見本は 、https://www.colordic.org/ 　からどうぞ

●　login-form・login-form2 にサンプル以外のコードもありますので、お好みがあれば自由にお使いください。