【Day2】 Text box
次の課題はこんなかんじ。
テキストボックスに何か入力してボタン押したら
テキストボックスの中に入れた文字がアラートで表示されるように
前回検索ボックスをつくったのでそのまま流用することに。
Language
HTML (前回分から一部変更)
CSS (前回分から変更なし)
Javascript (新しくHTML body内に追加)
My code
HTML/ Javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>googrun</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="container">
<img src="googrun.jpg" alt="logo">
<form name="tb">
<input class="box" type="search word" name="txbx" placeholder="What's your name?">
</form>
<p>
<form>
<input class="button1" type="button" name="search" value="Enter" onclick="tbox1()">
</form>
</p>
<!-- <p>
<form>
<input class="button2" type="button" name="search" value="I'm Feeling Lucky">
</form>
</p> -->
</div>
<script>
//Get the words from txbx
function tbox1() {
var str1=document.tb.txbx.value;
alert("Welcome! "+str1+"!!");
}
</script>
</body></html>
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 400px;
}
img{
width: 272px;
padding-top: 109px;
height: auto;
}
.box {width: 420px;
height: 34px;
}
body {width: 100%;
text-alighn: center;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;}
Note
細かい変更もちょこっとしましたが、主に赤字を追記、青字をコメントに変更。
前回はHTML上でinput elementをそのままむき出しで使用してましたが、
ただしくはform elementに子要素としてNestingすべしだったようです
Reference
MDN Web docs のこちらのページをみつつHTMLを修正しました。
How to structure an HTML form - Learn web development | MDN
Javascriptはほぼこのページに書いてある通りにしました。
