1. 글자 기입창
<input type="text">
추가 코드 - fieldset: 감싸는 상자 만들어줌 / legend: fieldset의 제목 / label: 텍스트와 기입창 함께 라벨링.
사용 속성 - placeholder: 기입하려고 클릭하면 사라지는 글씨
<body>
<fieldset>
<legend>기입용</legend>
<label>이름
<input type="text" placeholder="한글로 적어주세요"></label>
</fieldset>
</body>
2. 체크박스
<input type="checkbox">
사용 속성 - selected: 미리 선택해둠
<body>
<label><input type="checkbox">사과</label>
<label><input type="checkbox" checked>바나나</label>
<label><input type="checkbox" checked>복숭아</label>
<label><input type="checkbox">망고</label>
</body>
3. 숫자 기입창
<input type="number">
추가 코드 - small: 글자 크기 줄이기
사용 속성 - min: 숫자 최소값 설정 / max: 숫자 최대값 설정 / value: 기본값 설정
<body>
<label>구매개수
<input type="number" min="0" max="5" value="1"></label>
<label><small>1인당 최대 5개까지</small></label>
</body>
4. 1개 단일 선택
<input type="radio">
사용 속성 - name: 같은 이름들을 하나의 그룹으로 묶어 그 중 하나만 선택할 수 있도록 만들어줌. / checked: 미리 선택해둠.
<body>
<label><input type="radio" name="fruit">사과</label>
<label><input type="radio" name="fruit" checked>바나나</label>
<label><input type="radio" name="fruit">복숭아</label>
<label><input type="radio" name="fruit">망고</label>
</body>
5. 시간
<input type="time">
사용 속성 - placeholder: 예시처럼 커서 올리면 지워짐 / readonly: 고칠 수 없음. 선택, 읽기만 가능.
<body>
<label>시작 시간<input type="time" value="12:00" readonly></label>
<label>종료 시간<input type="time" value="21:00"></label>
</body>
6. 일자
<button type="date">
<body>
<label>시작 일자<input type="date" value="2019-06-01" readonly></label>
<label>종료 일자<input type="date" value="2019-12-31"></label>
</body>
7. 버튼
<button>버튼 이름</button> / <input type="button" value="버튼이름">
클릭하는 버튼.
<body>
<button>시작</button>
<input type="button" value="종료">
</body>
8. 제출 / 재입력
<button type="submit"> / <button type="reset">
form 코드 사이 요소들을 서버로 보낼 때 주로 사용.
사용 속성 - placeholder: 예시처럼 커서 올리면 지워짐
<body>
<form>
<div id="send">
<label>이름<input type="text" placeholder="홍길동"></label>
<label>나이<input type="number" mzx="100" min="1" placeholder="20"></label>
</div>
<button type="submit">제출</button>
<button type="reset">다시쓰기</button>
</form>
</body>
9. 색상 선택
<input type="color">
사용 속성 - value: 기본값 설정
<body>
<label>좋아하는 색상:
<input type="color" value="#2ED388">
</label>
</body>
10. 범위 선택
<input type="range">
사용 속성 - min: 숫자 최소값 설정 / max: 숫자 최대값 설정 / value:기본값 설정
<body>
<label>게임 난이도 설정:
<small>(하 중 상)</small>
<input type="range" min="1" max="3" value="1">
</label>
</body>
11. 특정 형식 (password, e-mail, tel)
<input type="number">
사용 속성 - min: 숫자 최소값 설정 / max: 숫자 최대값 설정
<body>
<p>
<label>비밀번호:
<input type="password" placeholder="뭘 써도 ****로 표기"></label>
</p>
<p>
<label>이메일:
<input type="email" placeholder="xxxxxx@xxxxxx.com"></label>
</p>
<p>
<label>휴대폰:
<input type="tel" placeholder="000-0000-0000"></label>
</p>
</body>
12. 목록
<select><option>
사용 속성 - selected: 목록형에서 처음에 나는 값.
<body>
<label>좋아하는 과일</label>
<select>
<option>사과</option>
<option>바나나</option>
<option selected>복숭아</option>
<option>포도</option>
</select>
</body>
'html+CSS+JS > html+CSS' 카테고리의 다른 글
| [html/기초] html 내부에 메모(/* */ , <!-- -->) (0) | 2019.06.24 |
|---|---|
| [html/기초] 용어랑 기초 (0) | 2019.06.20 |
| [html/기초] 체크상자, 기입란 만들기 (input, form, fieldset, legend) (0) | 2019.06.19 |
| [html/기초] 이미지나 문구에 링크 걸기 (a href, target, blank, id) (1) | 2019.06.18 |
| [html/기초] 이미지 관리 (img src, figure, figcaption) (0) | 2019.06.18 |
