かっこいい先端学校TIL(04.04)

29962 ワード
テキストリンク

HTML


form

<form>は、情報を入力する領域である.<form action="" method="">
  • formのプロパティ
  • 動作:入力値を送信することを示すページ.
  • メソッド:フォームデータの転送方法を定義します.
    メソッドプロパティにはgetとpostが含まれます.
    -get:Webサーバにデータを要求する
  • post:ファイルのアップロードまたはセキュリティ保護が必要なデータの転送に使用される

    • input

    <input>は、ユーザにフォームラベルに様々な情報を入力するスペースを提供し、ユーザが入力した情報を受信する.
  • inputのプロパティ
  • type:タグの外観を変更できます.text、radio、checkbox、password、buttonなどを指定できます.
  • name:タグ名の指定
  • readon:読み取り専用としてマークtextareaの場合、編集は行われません.
  • プレースホルダ:入力された値をプロンプトします.
  • required:タグに値を入力せず、submitボタンを押すとエラーが発生するため、データは送信されません.
    ...
  • inputタイプ
  • テキスト:テキスト入力
  • button:単純ボタン
    • を作成する
  • パスワード:マスク付きテキスト
  • date:入力日
  • 時間:入力時間
  • ファイル:アップロードファイル
  • email:入力Eメールアドレス
  • 番号:数字入力
    ... 
    • <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>form</title>
    </head>
    <body>
        <input type="text"><br>
        <input type="password"><br>
        <input type="date"><br>
        <input type="time"><br>
        <input type="button"><br>
        <input type="email"><br>
        <input type="radio"><br>
        <input type="checkbox"><br>
        <input type="file"><br>
    </body>
</html>

    label

    labelは、ユーザインタフェース項目の説明を表す.inputタグを記述するテキストの横に、何を入力する必要があるかを説明します.
  • 用法
  • テキストの説明とフォームの入力を含む
    • <label>
	이름 :
	<input type="text" name="name">
</label>
  • フォーム入力から分離する、for属性タグ
    • を使用する.
    <label for="myName">이름 : </label>
<input type="text" name="name" id="myName">

    select

    select要素ドロップダウン・リスト・ボックスを作成します.ユーザーが選択する必要があるリストボックスのアイテムを作成する場合は、optionタグを使用します.
    <form action="">
  <label for="myDevice">현재 사용하고 있는 스마트폰의 제조사를 선택해주세요</label>
  <select name="device" id="myDevice">
    <option value="iphone">아이폰</option>
    <option value="galaxy">갤럭시폰</option>
    <option value="ㅜㅜ">LG폰</option>
  </select>
</form>
  • selectプロパティ
  • multiple:複数のプロパティにより、ユーザーが複数のオプション要素を選択できます.
  • size:ドロップダウンリストに表示されるオプションの数を制御できます.
  • optionプロパティ
  • 値:選択した値に基づいて、サーバに送信する値を設定できます.
  • selected:ページのロード後にデフォルトで選択されたオプションを示します.

    • fieldset

    fieldset要素は、そのサブ要素として使用されるフォームコントロールをグループ化することを可能にする.特に、フォームの内容が豊富で、パーティション化が必要な場合に便利です.
    <form action="">
  <fieldset>
    <legend>개인정보</legend>
    <label for="myName">이름</label>
    <input type="text" name="name" id="myName">
    <label for="myTel">전화번호</label>
    <input type="tel" name="tel" id="myTel">
    <label for="myEmail">이메일</label>
    <input type="email" name="email" id="myEmail">
  </fieldset>
  <fieldset>
    <legend>개인정보 제공 동의</legend>
    <label for="checkAgree">개인정보 제공에 동의하십니까?</label>
    <input type="checkbox" name="agree" id="checkAgree">
  </fieldset>
</form>

    legend

    <legend>要素は、<fieldset>タグの直後にあり、フォームグループのタイトルを表す.<fieldset>の最初のサブアイテムとして使用する必要があります.

    button

    buttonタグは、ボタンをクリックできることを示す.ボタンの外観を制御し、ボタンの内部に他のサブ要素を追加します.
  • type
  • submit:ボタンをクリックしてフォームデータをサーバに送信します.指定されていない場合は、既定値です.
  • reset:フォーム内のすべての値を初期化します.
  • ボタン:ボタンをクリックできます.
    • <!-- 네이버 메인 화면의 검색 버튼 html 구조 -->

<button id="search_btn" type="submit" title="검색">
	<span class="blind">검색</span>
	<span class="ico_search_submit"></span>
</button>

    textarea

    textareaは、複数行のテキストを受信することができる.
  • プロパティ
  • cols:入力ウィンドウの幅.テキストの水平幅に基づいています.
  • row:textarea入力ウィンドウは、デフォルトで表示される入力行数を表します.
    • <textarea name="" id="" cols="40" rows="10" maxlength="10" minlength="5"></textarea>

    datalist

    datalistタグは、input要素で使用するオプションのリストを定義するために使用される.<datalist>は、<select>および<input>と混合して使用することができる.<input>のlistプロパティを使用して、<datalist>要素のidプロパティに関連付けます.
    <label for="solasystem">원하는 행성을 선택하세요 : </label>
<input type="text" id="solasystem" list="planets" name="planets">
<datalist id="planets">
    <option value="수성">수성</option>
    <option value="금성">금성</option>
    <option value="지구">지구</option>
    <option value="화성">화성</option>
</datalist>

    課題


    Google-formクローン!
    https://leeyeun.github.io/google-form/
    Angular base 64符号化
    React Componentとprops