100DaysOfCode / Day 1:
#100DaysOfCode 始めました。
「freecodecamp」の「レスポンシブウェブデザイン：HTML の学習: 猫の写真アプリを作成する」を手始めにやってみる。
久しぶりのコード入力が楽しい（しかもメモ帳的なやつ）
基本すぎる内容だし学びなんかないかなーと思ってたけど、
使い方や単語を思い出したり、うろ覚えだった箇所や使った事ないタグがあったり、意外に学びがあった。
<form action="https://freecatphotoapp.com/submit-cat-photo">
<fieldset>
<legend>Is your cat an indoor or outdoor cat?</legend>
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
</fieldset>
<fieldset>
<legend>What's your cat's personality?</legend>
<input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>
<input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
<input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label>
</fieldset>
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>form 要素
ユーザーから情報を集めるための要素。
action 属性
フォームのデータがどこへ送られるべきかを示します。
input 要素
ウェブフォームからデータを収集する方法をいくつか用意しています。
name 属性
action 属性で指定された場所でフォームのデータにアクセスできるようにするには、テキストフィールドに name 属性を追加し、送信されるデータを表す値を設定します。
fieldset 要素
ウェブフォーム内の関連する入力欄とラベルをグループ化するために使われます。
legend 要素
fieldset 要素内のコンテンツに関する説明文として機能します。 つまり、フォームのその部分に入力すべき内容についてのコンテキストをユーザーに提供します。
button 要素
属性が何も設定されていないボタンは、クリックされるとデフォルトの動作として、フォームの action 属性で指定された場所にフォームを送信します。
しかし、デフォルトの動作に頼ると混乱を招く可能性があるので type 属性と値 submit を追加して、送信ボタンであることを明確にしましょう。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">宣言
すべてのページは <!DOCTYPE html> で始める必要があります。 この特殊な文字列は宣言として知られ、ブラウザーが業界標準の仕様に従った動作を試みるよう保証します。
lang 属性
このページの言語が英語であることを指定するために、html の開始タグに lang 属性と値 en を追加してください。
meta 要素
head 要素内に自己終了要素である meta 要素を追加することで、ブラウザーのふるまいを設定できます。
charset 属性
UTF-8 に設定して、マークアップをさまざまな言語 (の文字) で表示できるようブラウザーに指示しましょう。
「MDN」にて「HTML要素リファレンス」をざっと読み。
使った事ないタグいっぱいあるよなー…
「ウェブ入門」を途中まで読んで今日は終わり。
https://developer.mozilla.org/ja/docs/Web/HTML/Element
なかなか時間の作り方が確立できないなぁ…
少しづつ積み上げていこう；；
この記事が気に入ったらサポートをしてみませんか？