HTML 7. Form tag(1)

36505 ワード
html テキストリンク

1.<form>タグ


ユーザからデータを受信し、これらの情報を処理し、データベースに基づいています.
フォームタグは、いくつかの例外要素を除いて、行内要素です.
きほんがた
フォーム要素

注意autocomplete:属性値として自動補完属性フォームタグを使用

1-1. input(1)


  • テキスト:
    • と入力
  • 値:サーバに送信された値
  • size:
  • name:サーバに送信されたコンテンツ(英語)
  • id:1つのIDは再利用できません.重複する内容を表現する場合は、異なるidを指定する必要があります.idは少なくとも1文字、スペースx、特殊文字(-、を除く)を含まず、大文字と小文字を区別する
    • その他
    ① type="hidden":画面上のフォームには表示されませんが、サーバに渡された値
    デフォルトタイプ:② type="text":テキストフィールドの作成
    デフォルトタイプ:
    属性値タイプ:name/size/value/maxlength

    ③ type="password":パスワードボックスの作成
    デフォルトタイプ:
    EX.ログインフォームの作成
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>login</title>
</head>
<body>
    <form action="#" method="">
        <label>아아디 : <input type="text"></label>
        <label>비밀번호 : <input type="password"></label>
        <label><input type="submit" value="로그인"></label>
    </form>
</body>
</html>
    login
    アディ:
    パスワード:
    ④ type="search":検索ボックスの作成
    デフォルトタイプ:
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>search</title>
</head>
<body>
    <form action="#" method="">
        <label><input type="search"></label>
        <label><input type="submit" value="검색"></label>
    </form>
</body>
</html>
    search
    ⑤ type="url":url入力ボックス
    デフォルトタイプ:
    →http://tで始まるサイトアドレスを入力する必要があります.
    ⑥ type="email":電子メールアドレス入力ボックスの作成
    デフォルトのタイプ:
    ⑦ type="tel":電話番号入力ボックスの作成
    デフォルトタイプ:
    ⑧ type="number":数値を入力
    基本タイプ:
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>search</title>
</head>
<body>
    <form action="#">
	주문개수 : <input type="number" min="1" max="10" value="1">개
    <!--
    min : 최소값
    max : 최대값
    value : 초기값-->
    </form>
</body>
    search
    注文数量:個
    ⑨ type="range":スライドバーを使用した数値の指定
    デフォルトタイプ:
    [例:各種数値入力フォーム]
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>number-range</title>
    <style>
        fieldset {
            padding: 10px;
            padding-bottom: 10px;
        }
        p {
            padding-left: 40px;
            margin-bottom: 5px;
        }
        .empty {
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
    <form action="#" method="POST">
        <fieldset>
            <legend><b>등록 정보</b></legend>
            <p><label>참여인원(최대 10명) <input type="number" min="1" max="10" value="1"></label></p><br>
            <p><label>지원물품(1인당 5개) <input type="number" min="1" max="5" value="1"></label></p><br>
            <p><label>희망단계(하,중,상)<input type="range" min="1" max="3" value="1"></label></p>
            <p class="empty"></p>
        </fieldset>
    </form>
</body>
</html>
    [スクリーン実装]
    number-range
    ツールバーの
    参加者(最大10名)
    サポートアイテム(お一人様5個)
    希望フェーズ(下、中、上)
    ⑩ type="radio":ラジオボタン
    デフォルトタイプ:
    ⑪ type="checkbox":数値を入力
    デフォルトタイプ:
    ->複数のアイテムを選択するフォーム要素
    1つを選択するときはラジオボタン、複数を選択するときはチェックボックス
    [プロパティ]

    [例]
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>radio_checkbox.html</title>
</head>
<body>
    <fieldset>
        <legend>신청 과목</legend>
        <p>이 달에 신청한 과목을 선택하세요. (1과목만 가능)</p>
        <label><input type="radio" name="subject" value="speaking">회화</label>
        <label><input type="radio" name="subject" value="grammer">문법</label>
        <label>><input type="radio" name="subject" value="writing">작문</label>
    </fieldset>
    
    <fieldset>
        <legend>메일링</legend>
        <p>메일로 받고 싶은 뉴스 주제를 선택해 주세요 (복수 선택 가능)</p>
        <label><input type="checkbox" VALUE="national shortcut news" checked>해외 단신</label>
        <label><input type="checkbox" VALUE="speaking 5 min">5분 회화</label>
        <label><input type="checkbox" VALUE="morning pops">모닝 팝스</label>
    </fieldset>
</body>
</html>
    [スクリーン実装]
    radio_checkbox.html
    申請科目
    今月申請した科目を選んでください.(1科目のみ)
    セッション
    構文
    >作文
    メール
    メールで受信したいニューストピックを選択してください(複数選択可能)
    海外メール
    5分間の会話
    朝のポップス
    入力ブランクチェック
    [白俊]10809号:アルファベット検索