[HTML]08(完了)

これでhtmlは完了です.次に学ぶ内容はcssで、画面を飾る機能があります.
今までにアップした内容はDoit!HTML+CSS+JS Web規格のテンプレートを参考にしました.

入力カーソルを自動的に配置するautofocusプロパティ

Autofocusプロパティを使用すると、ページがロードされるとフォームの任意の要素にマウスポインタを表示できます.

<input type="텍스트-입력-필드 autofocus required>

プレースホルダのプロパティ表示のヒント

ユーザーがテキストを入力すると、入力ボックスに適切なプロンプトを表示し、フィールドをクリックして消去できます.

<input type="text" id="user-name" placeholder="아이디를 입력하시오" autofocus>

readonlyプロパティ読み取り専用フィールドの作成

読み取り専用フィールドを作成することもできます.ユーザーは入力できません.読み取り専用です.
readonlyプロパティは、このフィールドを読み取り専用に変更します.

<input type="텍스트-입력-필드 readonly>

必須フィールドの必須属性の指定

フォームに内容を入力したら、submitボタンをクリックしてフォームをサーバに送信し、必要なフィールドがすべて入力されているかどうかを確認します.入力する必要がある内容については、requiredプロパティを必須フィールドとして指定できます.

<input type="text" id="user-name" autofocus required>

複数行のテキスト領域textareaタグを入力

フォームに複数行のテキストを入力する領域を作成することもできます.これをテキスト領域と呼びます.

<textarea>내용</textarea>

textareaラベルのプロパティは次のとおりです.
cols:テキスト領域の幅を文字単位で指定します.
rows:テキスト領域の縦方向の長さを動作単位で指定します.行数が指定した数より大きい場合は、スクロールバーが表示されます.

<textarea id="memo" cols="40" rows="4">내용</textarea>

ドロップダウンリストの作成に使用するselect、optionラベル

ユーザーが直接入力するのではなく、複数のオプションからコンテンツを選択するには、ドロップダウンリストまたはデータリストを使用します.ドロップダウンリストは、リストをクリックしたときにオプションが要素の下部に展開されたときに追加された名前です.
select:ドロップダウンリストの開始と終了を表示します.
selcetタグのプロパティは次のとおりです.
size:画面に表示するドロップダウン項目の数を指定します.
Multiple:ドロップダウンリストから複数のアイテムを選択します.
option:希望する項目を追加します.valueプロパティを使用して、サーバに渡される値を指定します.
optionラベルのプロパティは次のとおりです.
value:選択時にサーバに渡す値を指定します.
selected:ドロップダウンメニューを挿入するときにデフォルトで表示する項目を選択することを指定します.

データ・リストのdatalist、optionラベルの作成

データ・リストを使用すると、テキスト・フィールドに直接値を入力することなく、事前に作成された値から選択できます.
データリストを作成するときは、datalistタグを使用してデータリストの開始と終了を表示し、その間にオプションタグを使用して各データのオプションを表示します.この場合、valueプロパティを使用してサーバに渡す値が指定され、テキストフィールドにも表示されます.
次に、データ・リストを使用するテキスト・フィールドにid値を指定して、どのデータ・リストを関連付けるかを指定できます.

<input type="text" list="데이터 목록 id">
<datalist id="데이터 목록 id">
    <option value="서버로 넘길 값1">선택 옵션1</option>
    <option value="서버로 넘길 값2">선택 옵션2</option>
</datalist>

ボタンを作成するボタンラベル

buttonラベルを使用してフォームを送信またはリセットするボタンを挿入できます.
ボタンがアクティブな場合、ボタンラベルのtypeプロパティがどのように動作するかを指定します.submit、reset、buttonから選択できますが、指定しない場合はsubmitとみなされます.

<button type="submit">내용</button>
<button type="reset">내용</button>
<button type="button">내용</button>

これは学習内容を応用した日記作成ページです.