inputタグ

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

<form action="#" method="GET">
      <fieldset>
            <legend>type 속성</legend>
            <p>ID : <input type="text" name="id"></p>
            <p>PWD : <input type="password" name="pwd"></p>
            <p>Search : <input type="search" name="search"></p>
            <p>E-mail : <input type="email" name="email"></p>
            <p>Tel : <input type="tel" name="tel"></p>
            <p>Color : <input type="color" name="color"></p>
            <p>수량 : <input type="number" name="number" min="1" max="10" value="1"></p>
            <p>만족도 : <input type="range" name="range" min="1" max="10" value="1"></p>
            <p>yes <input type="radio" name="receive" checked="checked" value="yes"> no <input type="radio" name="receive" value="no"></p>
            <p> choice1 <input type="checkbox" name="check" value="choice1"> choice2 <input type="checkbox" name="check" value="choice2"> </p>
            <input type="submit">
      </fieldset>
</form>

getで送信すると、次のように値が上のurlウィンドウに表示されます.
?id=myID&pwd=1111&search=良い符号化は%3 F&email=suheon 7846%40 gmailです.com&tel=010-1111-1111&color=%23fcff2e&number=8&range=4&receive=yes&check=choice1&check=choice2#
formデータを送信する方法はget方式とpost方式があります.
get方式は上記のように、転送された値が表示されます.このようにしてユーザの重要な情報を表示することもできるので、重要な情報はpost方式で送信して隠すことが望ましい.

hidden

ユーザーに露出する必要のないデータを指定します.
type=「hidden」は画面に表示されません.

タグの選択

リストボックスタグを選択します.optionタグ以外のタグはサブエレメントとして表示できません.

 <p>좋아하는 과일 : 
	<select name="fruit">
            <option disabled selected>과일</option>
            <option value="apple">사과</option>
            <option value="banana">바나나</option>
            <option value="grape">포도</option>
	</select>
 </p>

で選択されたプロパティは、ページのロード時に事前に選択されたオプションを示します.

プライマリ入力属性

プレースホルダ:入力内容に関するヒントを提供します.

<p>ID : <input type="text" name="id" placeholder="Your ID"></p>

要求

:入力要素の内容が空の場合、警告メッセージが表示されます.

<p>ID : <input type="text" name="id" placeholder="Your ID"></p>
<p>PWD : <input type="password" name="pwd" required></p>

autocomplete:入力要素の自動補完機能をon、off値の属性に設定します.

<p>ID : <input type="text" name="id" placeholder="Your ID" autocomplete="on"></p>

モード:指定された文字モード(正規表現)が入力内容と一致するか否かを判断する属性.

<p>Tel : <input type="tel" name="tel" pattern="\d{3}-\d{4}-\d{4}" title="3자리-4자리-4자리"></p>

正式な儀式は後でもっと詳しく整理します.

無効:要素を無効にするプロパティ.

readon:入力内容を変更できない属性.