728x90
반응형

input 속성
readonly 읽기전용
- 서버로 값이 전송됨		  
autofocus 

자동커서 및 입력창
required 
- 필수 입력 속성. 예전에는 required = "required"로 표현 됨


placeholder="하이픈없이 입력"
- input요소에 입력되어야 할 값에 대한 힌트를 제공
- input엘리먼트의 type이
 text, password, email, tel, url, search에만 사용 가능.
- tel: Safari 8이상에서만 지원됨.

disabled 
- 비활성화 기능. 브러우저상에서 보임.
- 서버로 값이 전송되지 않음.
checked
- 미리 선택을 해 놓는 속성.
- radio, checkbox 엘리먼트에 사용
  

 

input 속성
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>웹폼</title>
    <style>
        /* body{text-align:right;} */
        legend{font-size:16px; font-weight:900;}
        label{font-size:14px; width:200px; color:#390; font-weight: bold; margin-right:10px;}
        li{list-style: none; margin: 15px 0; font-size:14px;}
    </style>
</head>
<body>
    <h1>여름방학 특강 신청</h1>
    <form>
        <fieldset>
            <legend>수강과목</legend>
            <ul>
                <li>
                    <label for="sub1">영어회화(초급)</label>
                    <input type="text" id="subj" name="subj" value="오전 9:00~11:00" readonly>
                </li>
            </ul>
        </fieldset>
        <fieldset>
            <legend>신청자</legend>
            <ul>
                <li>
                    <label for="uname">이름</label>
                    <input type="text" id="uname" name="uname" autofocus required> 
                </li>
                <li>
                    <label for="uid">학번</label>
                    <input type="text" id="uid" name="uid" placeholder="하이픈없이 입력" minlength="2" maxlength="8" required>
                </li>
                <li>
                    <label for="uclass">학과</label>
                    <select id="uclass" name="uclass">
                        <option value="archi">건축공학과</option>
                        <option value="mechanic">기계공학과</option>
                        <option value="indust">산업공학과</option>
                        <option value="elec">전기전자공학과</option>
                        <option value="computer" selected>컴퓨터공학과</option>
                        <option value="chemical">화학공학과</option>
                    </select>
            </ul>
        </fieldset>
        <fieldset>
            <legend>교재 주문</legend>
            <ul>
                <li><label for="book">교재</label><input type="number" id="book" value="1" min="1" max="3"></li>
                <li><label for="wsheet">워크시트</label><input type="number" id="wsheet" value="1" min="1" max="3"></li>
                <li><label for="group">단체주문</label><input type="number" id="group" value="10" min="10" max="100" step="10"></li>
            </ul>
        </fieldset>
        <fieldset>
            <legend>버튼 선택</legend>
            <button type="submit" value="submit">신청하기</button>
            <button type="reset" value="reset">다시쓰기</button>
        </fieldset>
    </form>
</body>
</html>​

font-weight : 깨지지 않는 범위에서.. 단위(px)기재 x 900값까지 

728x90
반응형
저작자표시 비영리 변경금지

'[HTML]' 카테고리의 다른 글

[HTML] style  (0) 2024.02.19
[HTML] <input 속성 - pattern, name>  (0) 2024.02.16
[HTML] <input type=" ">  (0) 2024.02.16
[HTML] form, optgroup, option, datalist, fieldset, legend  (0) 2024.02.15
[HTML] id, #, anchor, svg  (0) 2024.02.15

+ Recent posts

티스토리툴바