220926 form,figure,text

이승재·2022년 9월 26일
0
post-custom-banner
<form>
        <input type="text" disabled name="myName" maxlength="5" minlength="2" placeholder="이름을 입력하세요"><br>
        <input type="text" readonly value="홍길동" name="myName" maxlength="5" minlength="2" placeholder="이름을 입력하세요"><br>
        <!--disabled : 아예 사용불가   readonly : 읽기만 가능-->

        <input type="password" name="myPW"><br>
        <input type="button" value="확인">
        <input type="submit" value="전송">
        <input type="reset" value="재입력">
        <button>버튼</button>
        <input type="image" src="./images/login.jpg" alt="로그인"><br>
        <input type="checkbox" name="hobby" value="swimming" checked>수영
        <input type="checkbox" name="hobby" value="bawling">볼링
        <input type="checkbox" name="hobby" value="walking">걷기<br>
        <input type="radio" name="agree">동의한다
        <input type="radio" name="agree" checked>동의하지 않는다
        <input type="file"><br><br><br><br>
        <!-- HTML5에서 추가된 input -->
        <input type="color"><br>
        <input type="time"><br>
        <input type="week"><br>
        <input type="month"><br>
        <input type="date"><br>
        <!-- <input type="datetime"><br> 삭제-->
        <input type="datetime-local"><br>
        <input type="tel"><br>
        <input type="number"><br>
        <input type="range"><br>
        <input type="search"><br>
        <input type="email"><br>
        <input type="url"><br><br><br><br>







        <!--checkbox는 복수선택 가능  radio는 name을 지정하면 한개만 선택가능-->
        
        <textarea autofocus rows="5" cols="30" placeholder="문의내용을 입력하시오"></textarea><br>

        <select><!--multiple : 모바일을 위해-->
            <option value="html">HTML</option>
            <option value="css" selected>CSS</option>
            <optgroup label="JS">
                <option value="JavaScript">JavaScript</option>
                <option value="jQuery">jQuery</option>
            </optgroup>
        </select>
    </form>
    
    ```
    ```
    <form>
        <fieldset><!--영역 구분-->
            <legend>수강과목</legend>
            <label for="subj">영어회화(초급)</label><!-- subj끼리 연관되어 있다는 뜻 -->
            <input type="text" id="subj" readonly value="오전 9:00 ~ 11:00">
        </fieldset>
        <fieldset>
            <legend>신청자</legend>
            <label for="uname">이름</label><input type="text" id="uname" placeholder="이름을 적으시오" autofocus required><br>
            <label for="uid">학번
                <input type="text" id="uid" maxlength="7"  placeholder="7자로 작성하시오" required>
            </label>
            <br>
            <label for="uclass">학과</label>
            <select id="uclass">
                <option value="건축공학과">건축공학과</option>
                <option value="기계공학과">기계공학과</option>
                <option value="산업공학과">산업공학과</option>
                <option value="전기전자공학과">전기전자공학과</option>
                <option value="컴퓨터공학과" selected>컴퓨터공학과</option>
                <option value="화학공학과">화학공학과</option>
            </select>
            <br>
            <label for="ucall">연락처</label>
            <input type="tel" id="ucall" required maxlength="11" placeholder="'-'없이 11자리를 입력하시오">
        </fieldset>
        <fieldset>
            <legend>교재주문</legend>
            <label for="book">교재</lable>
            <input type="range" id="book" value="1" min="1" max="5">
            <br>
            <label for="wsheet">워크시트</lable>
            <input type="number" id="wsheet" min="1" max="10">
            <br>
            <label for="order">단체주문</lable>
            <input type="number" id="order" value="0" min="10" max="50" step="10">
            <br>
            <label for="pre">관심분야-문법, 어휘, 회화, 리스닝</lable>
            <input type="text" id="pre" list="interest">
            <datalist id="interest">
                <option value="grammar" label="문법"></option>
                <option value="voca" label="어휘"></option>
                <option value="speaking" label="회화"></option>
                <option value="listening" label="리스닝"></option>
            </datalist>
        </fieldset>
        <fieldset>
            <legend>신청과 재입력</legend>
            <input type="submit" value="submit">
            <input type="reset" value="reset">
        </fieldset>
        <br>
        <!-- <input type="submit" value="가입하기">
        <input type="reset" value="초기화"> -->
    </form>
    ```
post-custom-banner

0개의 댓글