目次一覧
状態:結論(後で見返す用)
閲覧数:2,349
投稿日:2015-05-13
更新日:2020-03-31
コピペ用HTML基本形 ／ コピペ用HTML formタグあり ／ HTML5タグ使用テンプレート
フォーム内要素比較一覧 ／ <label> 要素／ <fieldset> 及び <legend> 要素
フォーム横並び最小構成 ／ 別案1 ／ 改良案1
フォーム内要素比較一覧 ／ <label> 要素／ <fieldset> 及び <legend> 要素
フォーム横並び最小構成 ／ 別案1 ／ 改良案1
コピペ用HTML基本形 ／ コピペ用HTML formタグあり ／ HTML5タグ使用テンプレート
コピペ用HTML基本形
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="★★.css" rel="stylesheet">
<script src="★★.js"></script>
<style></style>
<script></script>
</head>
<body>
</body>
</html>
間違えやすい点
・linkタグのtype属性は省略可能だが、「rel="stylesheet"」は必要
・1タグの閉じタグは不要
・imgタグの閉じタグは不要
・終了タグが不要なhtmlタグ
コピペ用HTML formタグあり
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="xxxx.css" rel="stylesheet">
<script src="xxxx.js"></script>
<style></style>
<script></script>
</head>
<body>
<form action="xxxx.php" method="post"></form>
</body>
</html>
formタグ
・「action属性」と「method属性」の記述順番は任意だが、(記述ミス防止の観点から)Webサービス内で統一させておいた方が良い
・「action属性」は省略可能
→ HTML5では、action属性を省略すると、送信先はそのHTMLファイル自身になる
・「method属性」の初期値は"get"
HTML5タグ使用テンプレート
<header> <main> <footer>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="★★.css" rel="stylesheet">
<script src="★★.js"></script>
<style></style>
<script></script>
</head>
<body>
<header>
<nav>
<ul>
<li></li>
<li></li>
</ul>
</nav>
</header>
<main>
<h1></h1>
<h2></h2>
</main>
<footer>
</footer>
</body>
</html>
<header> <main> <article> <footer>
・article要素の定義
・article要素の中を取り出した際に単独でそれがコンテンツとして成立する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="★★.css" rel="stylesheet">
<script src="★★.js"></script>
<style></style>
<script></script>
</head>
<body>
<header>
<nav>
<ul>
<li></li>
<li></li>
</ul>
</nav>
</header>
<main>
<h1></h1>
<article>
<h1></h1>
<p></p>
</article>
<article>
<h1></h1>
<p></p>
</article>
</main>
<footer>
</footer>
</body>
</html>
<header> <main> <article> <figure> <figurecaption> <footer>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="★★.css" rel="stylesheet">
<script src="★★.js"></script>
<style></style>
<script></script>
</head>
<body>
<header>
<nav>
<ul>
<li></li>
<li></li>
</ul>
</nav>
</header>
<main>
<h1></h1>
<article>
<h1></h1>
<figure>
<img src="..." alt="...">
<figurecaption>画像のキャプション</figurecaption>
</figure>
</article>
<article>
<h1></h1>
<figure>
<img src="..." alt="...">
<figurecaption>画像のキャプション</figurecaption>
</figure>
</article>
</main>
<footer>
</footer>
</body>
</html>
・1ページに複数articleタグを配置する場合、articleタグ内の見出しはh1タグ開始？ それともh2タグ開始？
・【レスポンシブ ハンバーガーメニュー コピペ CSS】ドロワーメニュー 2019 サンプル 作り方
フォーム内要素比較一覧 ／ <label> 要素／ <fieldset> 及び <legend> 要素
フォーム内要素比較一覧
比較一覧表
| 属性名 | 必須 | 備考 |
|---|---|---|
| action | × | 省略すると、送信先はそのHTMLファイル自身になる |
| name | 〇 | - |
| id | × | - |
<label> 要素
項目名（ラベル）
・フォーム部品と項目名（ラベル）を関連付ける際に使用する
・複数使用可
フォーム部品とラベルを関連付ける2つの方法
・方法a.<label>～</label>の中にフォーム部品を配置する
・方法b.<label>タグのfor属性の値とフォーム部品のid属性の値を一致させる
コード例
<form action="xx.php" method="post">
<label>テキスト<input type="text" name="xx"></label>
<label>ファイル<input type="file" name="xx"></label>
<label>ファイル(複数)<input type="file" name="xx" multiple></label>
<label>メール<input type="email" name="xx"></label>
<label>URL<input type="url" name="xx"></label>
<label><input type="url" name="tweet_url" placeholder="画像投稿したツイートURLを入力してください。入力必須です" required><label>
<label>検索<input type="search" name="xx"></label>
<label>電話<input type="tel" name="xx"></label>
<label>数値<input type="number" name="xx"></label>
<label>日付<input type="date" name="xx"></label>
<label>日時<input type="datetime" name="xx"></label>
<label>ローカル日時<input type="datetime-local" name="xx"></label>
<label>月<input type="month" name="xx"></label>
<label>週<input type="week" name="xx"></label>
<label>時間<input type="time" name="xx"></label>
<label>レンジ<input type="range" name="xx"></label>
<label>色<input type="color" name="xx"></label>
<label for="★★">select 要素</label>
<select name="xx" id="★★">
<option value="">--オプションを選択してください--</option>
<option value="a">あ</option>
<option value="b">い</option>
</select>
<label for="☆☆">select 要素</label>
<select name="xx" id="☆☆">
<option value="a">あ</option>
<option value="" selected>--オプションを選択してください--</option>
<option value="b">い</option>
</select>
<label for="●●">textarea 要素</label>
<textarea id="●●" name="xx" rows="5" cols="33" placeholder="初期値"></textarea>
<input type="submit" value="送信">
</form>
・HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い
・<input>: 入力欄 (フォーム入力) 要素
<fieldset> 及び <legend> 要素
<fieldset> 要素
フォーム入力項目をグループ化する際に使用
・グループ先頭には、<legend>～</legend>で入力項目グループにタイトルをつける
・フォーム入力項目をグループ化することで、Tabキーなどでグループ間を簡単に移動できるという利点がある
<legend> 要素
・<fieldset>タグでグループ化されたフォームの入力項目にタイトルを付けるために使用
・<fieldset>～<fieldset>内の先頭に1つだけ記述
コード例
<form>
<fieldset>
<legend>グループ名</legend>
<label for="★★">項目名a</label>
<input type="radio" id="★★" name="xx">
<label for="☆☆">項目名b</label>
<input type="radio" id="☆☆" name="xx">
<button type="submit">送信</button>
</fieldset>
</form>
フォーム横並び最小構成 ／ 別案1 ／ 改良案1
フォーム横並び最小構成
単純なフォームであればこれでOK
但し、Chosenのように動的生成するタイプでは不可だった
<style>
body {
font-size: 125%;
color: #333;
background-color: #2196F3;
}
fieldset {
width: 90%;
margin: 20px;
border: 0 none;
}
legend {
font-size: 1.2em;
width: 100%;
border-bottom: 1px dotted #99c;
}
fieldset div {
margin: 4px 0;
}
input, textarea, select {
font-size: 1em;
padding: 2px 5px 4px;
border: 0 none;
border-radius: 2px;
}
/* flexbox styles */
fieldset div {
display: flex;
align-items: center;
}
label {
order: 1;
text-align: right;
padding-right: 0.5em;
white-space: nowrap;
user-select: none;
cursor: pointer;
width: 10em; /* 項目の長さに応じて変更する */
}
input, textarea, select {
order: 2;
flex: 1 1 auto;
}
/* label state styles */
input:focus ~ label, textarea:focus ~ label, select:focus ~ label {
color: #933;
}
input:checked ~ label {
font-weight: bold;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>投稿内容</legend>
<div>
<input id="name" name="name" type="text">
<label for="name">name</label>
</div>
<div>
<select id="experience" name="experience">
<option value="1">1 year or less</option>
<option value="2">2 years</option>
<option value="3">3 - 4 years</option>
<option value="5">5 years or more</option>
</select>
<label for="experience">experience</label>
</div>
</fieldset>
</form>
・フォームの横並びレイアウトはCSSのFlexboxでラクに実装しよう
別案1
<style>
ul li {
display: flex;
flex-wrap: wrap;
align-items: center;
}
ul span:first-of-type {
flex-basis: 120px;
}
ul span:nth-of-type(2) {
flex-basis: 210px;
flex-grow: 1;
}
ul input[type="text"], ul textarea {
width: 100%;
box-sizing: border-box;
}
</style>
<ul style="width:○○px">
<li><span>お名前</span>
<span><input type="text" name="name" size="20"></span></li>
<li><span>電話番号</span>
<span><input type="text" name="tel" size="20"></span></li>
<li><span>お問合せ内容</span>
<span><textarea name="content" cols="30" rows="5"></textarea></span></li>
<li><span>送信</span>
<span><input type="submit" value="送信"></span></li>
</ul>
・CSSフレックスボックス(display:flex)の使い方
改良案1
Chosenに干渉しないよう改良
<style>
ul.formul li {
display: flex;
flex-wrap: wrap;
align-items: center;
}
span.flabel {
flex-basis: 7rem;
text-align:right;
}
ul.formul span:first-of-type label {
margin-right:1rem;
}
ul.formul span:nth-of-type(2) {
flex-grow: 1;
}
ul.formul input[type="text"], ul.formul textarea {
width: 100%;
box-sizing: border-box;
}
.chosen-container{
width: 100%!important;
}
</style>