HTML.CSSは短く切り上げて、、と思っていましたが、
今後Webページ・アプリを作成していく上でフォームの作成が出てくるので
ここではHTML.CSSを使用した基本のフォームを記録として残して置こうと思います
これはHTMLで「form要素」を使用して作っていくんですが、form要素はフォーム関連要素の集まりを表すブロック要素で、
...のなかに、input要素などを入れてフォームを作成します。form要素（ブロック要素）
input要素（インライン要素）
type属性
・text(1行のテキスト入力欄)
・submit(送信ボタン)
placeholder属性(入力フォームに仮の文字列を入れる)
属性、特にinputo属性にはいろんな種類があります
.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<link rel="stylesheet" href="stylehc.css">
</head>
<body>
<div class="question">
<form class="question-form">
<input type="text" placeholder="名前" class="name-form">
<textarea name="message" placeholder="質問" class="message-form"></textarea>
<input type="submit" value="SEND" class="send">
</form>
</div>
</body>
</html>
.css
.guestion {
height: 500px;
background-color: lightgray;
display: flex;
justify-content: center;
align-items: center;
}
.question-form {
width: 600px;
}
.name-form {
margin: 0 auto 10px;
}
.message-form {
height: 150px;
margin: 0 auto 30px;
}
.name-form,
.message-form {
width: 500px;
padding: 15px;
border: 1px solid white;
display: block;
}
.send {
width: 200px;
margin: 0 auto;
padding: 15px;
border: 1px solid white;
color: white;
background-color: orange;
display: block;
}
1業入力、複数行入力、送信ボタンがあるフォームを作成し、
表示も中央へ寄せています。
フォーム要素という親要素に対して、各インライン要素だと並びを揃えることが難しいので、子要素のインライン要素をブロック要素へ変換（display: block;）します。
form要素って便利なので、使いこなして行きたいですね！
私はこの基本を理解度60％のまま進んでいったので、のちのちちょっと苦労しました、、、