FrontEnd/HTML_CSS
0826 HTML - 필수 태그 , input type 값
jeoniee
2022. 8. 26. 17:50
728x90
반응형
HTML의 필수 태그
<html>
<head>
<title><title/>
</head>
<body>
<body/>
</html>
Label 태그로 연결시키기
<html>
<head>
<title>FORM 으로 사용자와 연결하기 </title>
</head>
<body>
<hr>
<h1>form으로 사용자와 연결하기</h1>
<h2>form 요소 - input type 의 값들 </h2>
<form action = "test.jsp" method = "post">
<label for ="nm">이름</label> <input type = "text" id = "nm" >
<label for = "id">id</labe> <input tpye = "id" id = "id">
</form>
</body>
</html>페이지 안에서 중복은 할 수 없다.
nm 과 id와 같이 값을 다르게 넣은 것처럼 , 한 나라 안의 주민등록번호처럼!
항목 앞에 숫자 넣기 <ol></ol> <li></li>
<ol>
<li>
<label for ="nm">이름</label> <input type = "text" id = "nm" ><br>
</li>
<li>
<label for = "id">id</labe> <input tpye = "id" id = "id">
</li>
</ol>
<ol>
<li> 값 </li>
<li> 값2 </li>
</ol>
for, id 태그로 연결하기
<html>
<head>
<title>FORM 으로 사용자와 연결하기 </title>
</head>
<body>
<hr>
<h1>form으로 사용자와 연결하기</h1>
<h2>form 요소 - input type 의 값들 </h2>
<form action = "test.jsp" method = "post">
<ol>
<li> input type = "text" 주관식. 한 줄 글 상자 <br>
<label for ="nm">이름</label> <input type = "text" id = "nm" ><br>
</li><br>
<li> (input 에 대한 설명문을 뜻하는 label.<br>
label태그와 input태그를 for와 id값으로 서로 연결시켜 줌)<br>
<label for = "id">id</labe> <input tpye = "id" id = "id">
</li>
</ol>
</form>
</body>
</html>
글자 수 제한 두기 Maxlength = "n"
<input type = "password" id = "pwd" maxlength="10"><br>
사이즈 크기 조절
size = "n" 으로 입력창의 길이를 지정
큰 글 상자 <textarea> </textarea>
글씨를 키우려면? <textarea cols="" rows = ""> </textarea>
가로 세로 창 크기 를 지정할 수 있다.
</li>
<li><b>textarea ... /textarea </b> 주관식. 큰 글 상자<br>
<textarea cols= "50" rows = "10"> 자기소개를 해주세요.</textarea>
</li>
input type = "submit/reset/button
전송/취소/일반 역할의 버튼 생성
전송 , 초기화 / 취소 버튼
submit
reset
<input type = "submit" value = "><br>
<input type = "reset" value =">
일반 버튼 하나 만들어서 경고창 하나 생성하기
<input type = "button" value = "버튼" onclick = "alert('Why~~')">
버튼 태그 button
<button>전송</button>
<button>취소</button>
버튼에 타입을 넣을 수 있다.
<button type = "reset">취소</button>
일반 버튼인데 type = " " 하면 전송이 됨
<button type = " ">버튼</button>
일반 버튼인데 누르면 아무일도 안일어남
<button type = "button">버튼</button>
버튼 태그랑 똑같은데 굳이 왜 만들었느냐...하면 버튼 사이에 태그가 들어갈 수 있기 때문이다.
버튼 안에 CSS 를 활용할 수 있다!
<button type = "button"><b>^^</b></button>
이미지 태그
<hr>
<p>
<b>input type = "image"</b> 전송용 이미지 <br>
src 속성으로 이미지 지정 <br>
<input type = "image" src = "img_submit.gif"> </p>
이미지 크기 바꾸기
가로 width =" " 세로 height = " "
<input type = "image" src = "img_submit.gif" width = "30" > </p>
radio 랑 checkbox의 차이
Radio 버튼 (단일 선택)
같은 질문하의 요소 끼리는 name 의 값을 서로 일치시킴
선호하는 색상은?
<label><input type ="radio" name = "clr"> 빨강 </label>
<label><input type ="radio" name = "clr"> 초록 </label>
<label><input type ="radio" name = "clr"> 파랑 </label>
초기값 설정 checked
<label><input type ="radio" name = "clr" checked> 초록 </label>
Checkbox 버튼 (다중 선택)
input type = "checkbox" </b>객관식(다중 선택형). 체크박스 <br>
초기값으로 지정될 요소는 checked(checked="checked")를 추가. <br>
<p>가장 선호하는 색상은? <br>
<label><input type ="checkbox" checked> 빨강 </label>
<label><input type ="checkbox" > 초록 </label>
<label><input type ="checkbox" checked> 파랑 </label>
<label><input type ="checkbox" > 분홍 </label>
<label><input type ="checkbox" > 하늘 </label>
select ... / select 목록 선택 버튼 (Drop down list)
<select>
<option>red</option>
<option>blue</option>
<option>green</option>
<option>pink</option>
<option>skyblue</option>
<option>olive</option>
<option>orange</option>
</select>
초기값 을 바꾸고 싶다면?
option 값에 selected 적어주면 된다.
<select>
<option>red</option>
<option>blue</option>
<option>green</option>
<option>pink</option>
<option selected>skyblue</option>
<option>olive</option>
<option>orange</option>
</select>728x90
반응형