겉바속촉

[html] 여러가지 checkbox들 본문

IT일기(하반기)/HTML

[html] 여러가지 checkbox들

겉바속촉 2020. 6. 11. 10:52
728x90
반응형

우선 head까지 다음과 같이 작성해주세요:)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<style type="text/css">
	table{
		border: 2px solid gray;
		width: 500px;
	}

tr,th,td{
	border: 1px dotted gray;
	font-size: 10pt;
}

</style>
</head>

그리고 <body>사이에 <table>생성해주세요!
그다음 <caption>넣어주시고

 

시작해보겠습니다:)

행을 하나씩 넣어줄게요

<tr>블럭안에서 작성해주시면 됩니다

<tr height="30"> 
	<td> 
	<b>최종학력을 선택하세요</b> 
		<!-- radio는 name이 동일해야함 --> 
		<input type="radio" name="grade" value="고등학교">고등학교&nbsp; 
		<input type="radio" name="grade" value="전문대학">전문대학&nbsp; 
		<input type="radio" name="grade" value="대학교">대학교&nbsp; 
		<input type="radio" name="grade" value="대학원">대학원&nbsp; 
	</td> 
</tr>

그리고 컴파일 해보시면

다음과 같이 나옵니다

 

아마 체크가 가능하실 거에요!!

 

 

 

행 추가; 본인이 가능한 컴퓨터 언어는?

<tr>
	<td>
		<b>본인이 가능한 컴퓨터 언어는?</b>
			<input type="checkbox" name="Lang" value="C언어">C언어&nbsp;
			<input type="checkbox" name="Lang" value="JAVA">JAVA&nbsp;
			<input type="checkbox" name="Lang" value="Spring">Spring&nbsp;
			<input type="checkbox" name="Lang" value="Android">Android&nbsp;               
	</td>
</tr>

컴파일

이것 역시 체크가 가능합니다

 

 

 

 

행 추가; 이미지 선택

<tr>
	 <td>
	 	<b>이미지선택</b>
	 	 <input type="file">
	 </td>
</tr>

컴파일

파일 선택을 누르시면 파일탐색기가 열릴 거에요:)

 

 

 

 

행 추가; 우리반에서 가장 좋은사람?

<tr>
	 	<td>
	 		<b>우리반에서 가장 좋은사람?</b>
	 				<select>
	 					<option value="보라돌이">보라돌이</option>
	 					<option value="뚜비">뚜비</option>
	 					<option value="나나">나나</option>
	 					<option value="뽀">뽀</option>
	 					<option value="텔레토비">텔레토비</option>
	 				</select>	 		
	 	</td>
</tr>

컴파일

고를 수 있게 뜹니다:)

 

 

 

 

행 추가; 당신의 키는 몇cm입니까?

 <tr>
	    	<td>
	    		<b>당신의 키는 몇cm입니까?</b>
	    			<input type="number" name="height" min="150"
	    			max="230" step="2" value="150">cm
	    	</td>	    
 </tr>

키의 범위값을 정해주는 것 --> min, max

증가하는 값 --> step

기본으로 나오는 값 --> value

 

 

컴파일

 

 

 

 

행 추가; 당신의 몸무게는 몇kg입니까?

<tr>
	    	<td>
	    		<b>당신의 몸무게는 몇kg입니까?</b>
	    			<input type="number" name="weight" min="20"
	    			max="200" step="2" value="50">kg
	    	</td>	    
</tr>

키와 마찬가지로

몸무게의 범위값을 정해주는 것 --> min, max

증가하는 값 --> step

기본으로 나오는 값 --> value

 

 

컴파일

 

 

 

 

행 추가; 색상선택

<tr>
	    	<td>
	    		<b>색상선택</b>
	    			<input type="color">
	    	</td>	    
</tr>

 

컴파일

 

행 추가

<tr>
	    	<td>
	    		<b>날짜선택</b>
	    			<input type="date">
	    	</td>	    
</tr>

 

컴파일

모든 코드블럭

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<style type="text/css">
	table{
		border: 2px solid gray;
		width: 500px;
	}

tr,th,td{
	border: 1px dotted gray;
	font-size: 10pt;
}

</style>
</head>
<body>
<table>
	<caption>Radio&Check</caption>
		<tr height="30">
			<td>
			<b>최종학력을 선택하세요</b>
			<!-- radio는 name이 동일해야함 -->
			<input type="radio" name="grade" value="고등학교">고등학교&nbsp;
			<input type="radio" name="grade" value="전문대학">전문대학&nbsp;
			<input type="radio" name="grade" value="대학교">대학교&nbsp;
			<input type="radio" name="grade" value="대학원">대학원&nbsp;
			</td>
		</tr>
		
		<tr>
			<td>
				<b>본인이 가능한 컴퓨터 언어는?</b>
				<input type="checkbox" name="Lang" value="C언어">C언어&nbsp;
				<input type="checkbox" name="Lang" value="JAVA">JAVA&nbsp;
				<input type="checkbox" name="Lang" value="Spring">Spring&nbsp;
			    <input type="checkbox" name="Lang" value="Android">Android&nbsp;               
			 </td>
	 	</tr>
	 	
	 	<tr>
	 		<td>
	 			<b>이미지선택</b>
	 				<input type="file">
	 		</td>
	 	</tr>
	 	
	 	<tr>
	 		<td>
	 			<b>우리반에서 가장 좋은사람?</b>
	 				<select>
	 					<option value="보라돌이">보라돌이</option>
	 					<option value="뚜비">뚜비</option>
	 					<option value="나나">나나</option>
	 					<option value="뽀">뽀</option>
	 					<option value="텔레토비">텔레토비</option>
	 				</select>	 		
	 		</td>
	    </tr>
	    
	    <tr>
	    	<td>
	    		<b>당신의 키는 몇cm입니까?</b>
	    			<input type="number" name="height" min="150"
	    			max="230" step="2" value="150">cm
	    	</td>	    
	    </tr>
	    
	    <tr>
	    	<td>
	    		<b>당신의 몸무게는 몇kg입니까?</b>
	    			<input type="number" name="weight" min="20"
	    			max="200" step="2" value="50">kg
	    	</td>	    
	    </tr>
	    
	    <tr>
	    	<td>
	    		<b>색상선택</b>
	    			<input type="color">
	    	</td>	    
	    </tr>
	    
	     <tr>
	    	<td>
	    		<b>날짜선택</b>
	    			<input type="date">
	    	</td>	    
	    </tr>

</table>

</body>
</html>

 

모두 완성본

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

'IT일기(하반기) > HTML' 카테고리의 다른 글

[html] 자동완성 설치하기  (0) 2020.06.11
[html] Audio랑 Video 넣어보기  (0) 2020.06.11
[html] 디자인해주기  (0) 2020.06.10
[html] image파일 넣기 연습  (0) 2020.06.10
[html] css 테스트  (0) 2020.06.10
'IT일기(하반기)/HTML' Related Articles more