#6,7,8 How to make HTML Forms & Introduction to CSS

2024年6月26日 15:08

#6-7 Kinds of Form Controls続き (learned on June 25, 2024)
・Checkbox
input: checkboxと入力するとsuggestionが出てくるのでEnter。
syntaxは例えば次の通り。これを必要な選択肢分作る。
<input type="checkbox" name="dissert" id="icecream">
<label for="icecream">Ice-cream</label>

note)
<input>は<label></label>の前に書く。<input>が後ろだと選択肢の文字が左側、checkboxはその右側にきてしまう。radio buttonを作るときも同様に<input>を先に書く。

・Dropdown List Box
labelをつけてから、<select></select>と<option></option>で選択肢を作る。例えばsyntaxは以下。
<label for="color">What is your favorite color?:</label>

<option value="green">Green</option>

</select>

・Multiple Select Box: dropboxの中から複数の選択肢を選択できる。dropboxの<select>elementにmultipleを追加。

<option value="green">Green</option>

</select>
・File Input Box
input typeはfile. nameもidもfile.
ex.)<input type="file" name="file" id="file">

・Button
input typeはsubmit. submitボタン上に表示する文言をvalue=""で指定。<button>text</button>でもweb page上にボタンを作成できる。
ex.)<input type="submit" value="Click Me!">

・Form Validation: 必須項目の作成。
<input>内にrequiredを追加。
<label for="names">Full Name:</label>
<input type="text" name="names" id="names" required>
Full Name: の項目を入力せずに送信ボタンを押すと、必須項目に入力するようにメッセージを表示できる。

・Placeholder: 入力欄にメッセージを表示
placeholder=""に入力した文言が回答欄内にグレーで表示される。
ex.)<label for="names">Full Name:</label>
<input type="text" name="names" id="names" required placeholder="Please enter full name..." size="35">

note)
練習問題でwebページとフォームの制作をしました。
回答項目が多いと、各項目と回答欄の位置を左寄せに揃えた方が見やすいですよね。そういう場合は、<table></table>を使うと揃えることができます。

#8 Introduction to CSS (learned on June 26, 2024)
・CSSはCascading Style Sheetsの略。
cascadeの意味を調べてみると、他動詞では「〔～を〕次へとつなげる、転送する」で、styleをhtmlへとlつなげる役割だということが名前から分かります。

・CSSには次の3種類：
1. Inline CSS: .htmlのelement内に入れ込む。elementのsyntaxがシンプルな場合に使用。
2. Internal CSS: HTML pageのうち<head></head>内で使う。<style>elementを使用。
ex) <style>
h1{
color: aqua;
}
</style>
3. External CSS: use an external CSS file.他のフォルダに拡張子.cssのファイルを作り、そのファイルとhtmlファイルを<link>elementでリンクさせる。<link>elementはhtmlファイルの<head>elementの中に書く。
.htmlファイルのsyntaxが複雑な場合はCSSファイルを別に作ってリンクさせる。

ex) < !--以下はhtmlファイルに書く-->
<head>
<link rel="stylesheet" href="リンクさせたいファイル名">
</head>
note)リンクさせたいファイル名は、そのファイルが格納されているフォルダ名のsuggestionが出てくるので、そこから選択することで自動入力される。

・CSS Selectors: 今日学んだのは4種類:
1. * : Universal selector
*{ }と書くとリンクされているhtml pageに入力情報全てに{ }内で指定するスタイルが適用される。

2. Element selector
htmlファイル内のelement。body, h1, pなど
ex.)
body { background-color: burlywood;}
h1{ background-color: aqua;}

note)
上記のsyntaxのbackground-color: はCSS Property name。:を忘れずに。burlywood;やaqua;はproperty value。;を忘れずに。

3. Class selector
htmlファイルでclassを作り、そのclassのみにCSSで指定するスタイルを適用。
ex)

<p class="introduction">Welcome to my website.</p>
/* cssファイルでスタイルを指定。class名の前に .を忘れず書く */
.introduction{
color: white;
}

note)
Class selectorは複製可能。同じ名前のclassをhtmlファイルに作り、そのclassに同じスタイルを適用できる。

4.ID selector
作り方はClass selector同様。
ex.)

<p id="content">text</p>
/* ID selectorの場合、 #から始める */
#content{
color: chocolate;
}

note)
CSSのスタイルは1番最後に書いたスタイルが適用される。

反省
昨日は復習のためのnote執筆が出来ませんでした。本業の締め切りに追われていたり、挨拶回りで以外と時間がかかったりで。15分だけでもいいから、と基準を緩くして、その日のうちに自分の言葉で復習した方がいいですね。
どうしても無理！という時は、やる気出る音楽で自分をあげて仕事モードに乗らせる。

この記事が気に入ったらサポートをしてみませんか？