화면구현/HTML
HTML 기본 컴포넌트
psys
2020. 6. 18. 09:22
728x90
Input
1) button
<body>
<input type="button" value="눌림">
</body>
2) radio button
value값은 보이지 않는다!!
<body>
남<input type="radio" name="sb" value="M"><br>
여<input type="radio" name="sb" value="F"><br>
</body>
name속성을 통해 그룹으로 묶어 같은 그룹 중 하난만 선택 가능하도록 설정
더보기



<body>
남<input type="radio" name="sb" value="M">
여<input type="radio" name="sb" value="F"><br>
내국인<input type="radio" name="sb1" value="M">
외국인<input type="radio" name="sb1" value="F"><br>
</body>
다른 그룹명을 지정하여 그룹마다 하나씩 버튼이 선택되도록
checked

남<input type="radio" name="sb" value="M" checked>
여<input type="radio" name="sb" value="F"><br>
3) checkbox
다중 선택 가능
<body>
1<input type="checkbox" name="ck1" value="1">
2<input type="checkbox" name="ck1" value="2">
3<input type="checkbox" name="ck1" value="3">
4<input type="checkbox" name="ck1" value="4">
</body>
더보기

checked를 통해 디폴트 값을 지정 할 수 있음

<body>
1<input type="checkbox" name="ck1" value="1">
2<input type="checkbox" name="ck1" value="2" checked>
3<input type="checkbox" name="ck1" value="3">
4<input type="checkbox" name="ck1" value="4">
</body>
4) select
더보기

selected로 디폴트 값을 지정 할 수 있음

<body>
<select>
<option value="1" >박</option>
<option value="2">성</option>
<option value="3" selected>연</option>
<option value="4">짱</option>
</select>
</body>
5) text박스
<body>
<input type="text" name="tx" value="후 힘들어">
</body>
6) hidden
사용자에게 보이지 않고 나는 그 값이 꼭 필요할 때 페이지 안에 숨겨 놀 때 사용
<body>
<input type="hidden" value="난 안보이징">
</body>
7) file
<body>
<input type="file" value="">
</body>
8) date
<body>
<input type="date" name="" id="">
</body>
9) color
색을 고를 수 있는 상자
<body>
<input type="color" value="">
</body>
textarea
여러줄을 입력 할 때 사용
<body>
<textarea>안녕?</textarea>
</body>