HTML/CSSを使ったフォームの作り方の記事を書きたいと思う。
フォームの入力欄の作成
■form要素
form要素とは、フォーム関連要素の集まりを表すブロック要素。
form要素を用いて、フォームの大枠の要素を作成する。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="contact">
<form class="contact-form">
</form>
</div>
</body>
</html>
.contact {
height: 800px;
background-color: lightgray;
display: flex;
justify-content: center;
align-items: center;
}
.contact-form {
width: 600px;
}
名前の入力欄の作成
■input要素
フォームの入力欄や実行ボタンなどを作成することができるインライン要素。
input要素にはtype属性という設定があり、
それを指定することによって様々な種類のフォーム部品を作り出せる。
終了タグは必要ない。
| type属性 | 用途 |
|---|---|
| text | １行のテキスト入力欄を作成できる |
| checkbox | チェックボックスを複数作成できる |
| radio | 複数の中から１つしか選択できない、ラジオボタンを作成できる |
| submit | 送信ボタンを作成できる |
■placeholder属性
入力フォームに仮の文字列を入れることができる。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="contact">
<form class="contact-form">
<input type="text" placeholder="NAME" class="name-form">
</form>
</div>
</body>
</html>
.contact {
height: 800px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}
.contact-form {
width: 600px;
}
.name-form {
width: 500px;
padding: 15px;
border: 1px solid black;
display: block;
}
これで、名前を入力するフォームの作成が完了。
ポイントは、input要素はインライン要素のため
display:blockを使用し縦並びになるようにした。
複数行の入力欄の実装
複数行の入力欄は、textarea要素を使用する。
■textarea要素
複数行のテキスト入力欄を作成するインライン要素。
終了タグが必要。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>form</title>
<link rel="form" href="style.css">
</head>
<body>
<div class="contact">
<form class="contact-form">
<input type="text" placeholder="NAME" class="name-form">
<textarea name="message" placeholder="MESSAGE" class="message-form"></textarea>
</form>
</div>
</body>
</html>
.contact {
height: 800px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}
.contact-form {
width: 600px;
}
.name-form {
margin-bottom: 10px;
}
.message-form {
height: 150px;
margin-bottom: 30px;
}
.name-form,
.message-form {
width: 500px;
padding: 15px;
border: 1px solid black;
display: block;
}
送信ボタンの実装
input要素のtype属性に、submitを設定することで、送信ボタンを作成できる。
■value属性
フォームの送信をした時に、どのような値を送信するのかを決めることができる。送信ボタンに限っては、value属性で指定した文字が、送信ボタンに表示される。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="contact">
<form class="contact-form">
<input type="text" placeholder="NAME" class="name-form">
<textarea name="message" placeholder="MESSAGE" class="message-form"></textarea>
<input type="submit" value="送信" class="send">
</form>
</div>
</body>
</html>
.contact {
height: 800px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}
.contact-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 black;
display: block;
}
.send {
width: 200px;
padding: 15px;
margin: 0 auto;
border: 1px solid white;
color: white;
background-color: blue;
display: block;
}
以上で、フォームの実装は完了。
まとめ
・form要素とは、フォーム関連要素の集まりを表す要素。
・input要素とは、フォームの入力欄や実行ボタンなどを作成することができる要素。
・textarea要素とは、複数行のテキスト入力欄を作成できる要素。
・input要素にはtype属性という設定があり、それを指定することによって様々な
種類のフォーム部品を作り出すことができる。