フォームタグ

タグ

は、ユーザ入力データの送信方法および処理プログラムを決定するために使用される.
属性の未処理※get  - URLウィンドウでデータを送信します.  - データサイズが限られている(256～4096 Byte)  - データ表示※post  - 送信方法はhttpheaderに含まれます  - データ・サイズの制限なし  - 簡単にデータを見ることができない(技術的にのみ)name <form>タグの一意名称指定、<form> actionデータを使用するプログラム(ページ)を区別するtargetaction属性を開く方法を指定するプログラム(ページ)自動完了※自動保存機能など  - 前に入力した内容を出力する機能、省略後自動出力(default:on)  - formでautocompleteを指定するとformに属するすべての入力に適用されます
👉 合成例1

<form action="https://search.naver.com/search.naver" method="get" autocomplete="on">
    <input type="text" name="query">
    <input type="submit" value="검색">
</form>

作成例2

<form action="/action_page.html" method="get" autocomplete="on">   
    ID : <input type="text" name="id">  <br/>          
    PW : <input type="password" name="pw">  <br/>       
    <input type="submit">    
</form>

👉 結果.

Fieldset、legendラベル

fieldset:フォーム要素をグループ化するタグ

の例:ラベル

、バインドされたフォーム要素と命名
フォーム要素を属性のminamefieldsetのformfieldsetが属するフォームの名前fieldsetにバインドし、legendによってバインドされたフォーム要素に名前を付けます.
サンプルの作成

<form action="/action_page.html" method="get" autocomplete="on">
    <fieldset>
    <legend>회원가입</legend>
    ID : <input type="text" name="id"> <br/>
    PW : <input type="password" name="pw"> <br/>
    <input type="submit" value="로그인">
    </fieldset>
</form>

👉 結果.

inputタグ

ユーザ入力データを受信するためのタグ

type:入力ウィンドウのタイプを決定するプロパティ(テキスト、チェックボックス、ラジオ、選択など)

属性を生成するテキストなし単行テキスト入力ウィンドウ(入力に示す)パスワード入力ウィンドウ(入力時に●●●●●と表示される)は、ユーザが見えないが値を入れることができるウィンドウマネージャに必要な値を隠すために必要なボタンを生成する.独自の機能ではなく、スクリプト接続関数で活用チェックボックスファイル入力フォーム出力画像フォーマット(ボタンではなくsubmit機能を持つ画像)を作成ラジオボタンsubmitを作成して入力したデータを他のページに転送する(submitはコミットを表す)reset入力内容を消去する機能valueinput要素のデフォルト値は、nameinputごとに区別できる名前min/max/stepが許容する範囲最小値/最大値/値の増減値autocomplete自動完了機能height/width入力ウィンドウの高さと幅が読取り専用フィールドacceptファイルタイプの機能入力複数の値機能プレースホルダユーザー入力前入力ウィンドウ表示記事autofocus入力ウィンドウカーソル表示必要入力フィールド指定list <datalist>のオプション値<input>にmaxlengthユーザーが入力できる文字数制限size画面に表示される文字数minlength最小入力文字指定(最新のクロム、アンドロイドのみサポート)実行するプログラム接続のフォーマット(submit/image用)formenctype転送時にformnovalidate転送時にデータが有効かどうかを解析する方法を指定し、フォームターゲットサーバの応答がどこに表示されるかを指定します.

テキストの種類

属性の名前のないテキストタイプ区切り文字または名前sizeユーザー画面に表示する文字入力ウィンドウの長さ値textに入力する値、設定されていない場合はNull値maxlengthを受け入れる総数
👨‍🎓 作成方法

<input type=text name="명칭" value="값" size="숫자" maxlength="숫자">

パスワードの種類

属性の名前なしパスワードタイプの名前または名前minlengthpasswordに含める最小文字数maxlengthpasswordに含める最大文字数
👨‍🎓 作成方法

<input type=password name="명칭" minlength="숫자" maxlength="숫자">

ボタンの種類

属性の未ididタイプの区切り記号(名前は重複可能、idは重複不可)valuebuttonに表示される値イベントjavaスクリプトの動作(onlinkなど)をロード
👨‍🎓 作成方法

<input type=button id="명칭" value="값" onclink="스크립트 함수">

ファイルの種類

選択可能なプロパティの複数のファイル
👨‍🎓 作成方法

<input type=file name="명칭">
<input type=file name="명칭" multiple>

他のhtml 5でサポートされているinputラベルのtype。

inputタグのtype意味合成方法color色選択タイプ<input type="color" name = "명칭" /> datetime-localmonth曜日と時間選択タイプ<input type="타입명" id="명칭" min="0000-00-00" max="0000-00-00" step="숫자" value="날짜"/>※date:yyy-mm-dd※dettetime-local:yy-mm-ddT 00:00(24)※mond:yyyyy-mmtime時間タイプ<input type="time" value="12:00"/>数字値タイプ-value:初期表示値<input type="number" min="1" max="100" step="2" value="1"/> rangeスライドバー指定数字<input type="range" id="명칭" min="숫자" max="숫자" value="숫자"> search telemailurl-クエリーを入力するウィンドウ出力入力ボックスにXボタン-電話番号を入力するウィンドウ出力(自動識別番号コード)を生成-@を含むウィンドウを作成します(@が存在するかどうかを確認します)-アドレス値を入力するウィンドウ出力(http://があるかどうかを確認します)<input type="search"/"url"/"email"/"tel" id="명칭" value="초기값">

select、option、optgroupラベル

selectは、オプションにおいてリストを作成するselectタグによって選択するためのタグ

とともに使用される.

selectedを使用して、基本的に初期選択値を指定します.

optgroupラベルを使用して、リスト別にグループ化できます.

ex)

<select>
   
    <optgroup label="르노삼성">
        <option >SM3</option>
        <option >SM5</option>
        <option >SM6</option>
    </optgroup>
    
    <optgroup label="현대">
        <option >아반떼</option>
        <option >그랜저</option>
    </optgroup>
    
</select>

datalistタグ

datalistは単独で使用するものではなく、inputラベルとともに

を使用することができる.

selectとは異なり、inputtype=「text」とともに書き込まれ、

に直接書き込むことができます.

オプションラベルとともに使用する

ex)

좋아하는 가수 <br/>

<datalist id="who" >
    <option value="악동뮤지션">
    <option value="아이유">
    <option value="블랙핑크">
    <option value="빅뱅">
</datalist>

<input type="text" list="who" />

textareaタグ

長い文字のテキストを作成するためのタグ

cols属性および行属性は、最初に作成された空間

を指定することができる.
サンプルの作成

메모 : <textarea cols="50" rows="5"></textarea>