Google研修（補足）の解説ページ

<style>

form {

  margin:auto;

  width: 190px;

  background-color: white;

  padding: 12px 15px 20px 15px;

  text-align: center;

  border: 1px solid blue;

  border-radius: 2px;

}

.tittle {

  display: block;

  /*　タイトル位置決め left, center or right　*/

  /*　タイトル位置調整、text-align: right のときは margin-right で調整　*/

  text-align: center;

  margin-left: 0px;

  font-size: 22px;

  color: mediumblue;

  font-weight: 400;

}

.ipw {

  width: 160px;

  height: 30px;

  background-color: none;

  border: 1px solid blue;

  border-radius: 2px;

  outline: none;

  font-size: 13px; 

  text-align: center;

  margin-top: 25px;

  margin-bottom: 10px;

}

.ipw:focus { 

  outline: 2px solid blue;

}

.btn {

  /*　blockをinlineに変えればパスワード入力欄とボタン横並び配置（横幅を調整する必要あり）　*/

  display: block;

  /*　ボタン位置決め（調整）auto auto は中央配置　*/

  /*　ボタン位置決め（調整）left で調整しても right で調整してもOK　*/

  margin-left: auto; 

  margin-right: auto; 

  width: 160px;

  height: 30px;

  background-color: none;

  border: 1px solid blue;

  border-radius: 2px;

  font-size: 14px;

  color: blue;  

}

.btn:hover {

  background-color: blue;

  color: white;

  opacity: 0.7;

}

</style>

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

 <span class="tittle">Login</span>

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

 <input class="btn" type="submit" value="ログイン">

</form>

<script>

function Check() {

  document.myform.action = 

  "https://sites.google.com/view/********/"+ document.myform.pwd.value;

}

</script>