기본 입력 양식 태그
- input 태그의 type 속성을 이용해 다양한 기본 입력 양식 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>experience</title>
</head>
<body>
<!-- 입력 -->
<input type="text" name="text" value="text"><br>
<input type="password" name="password" value="password"><br>
<input type="checkbox" name="checkbox" value="checkbox"><br>
<!-- 보이지 않는 입력방식 -->
<input type="hidden" name="hidden" value="hidden"><br>
<!-- 버튼 -->
<input type="button" value="button"><br>
<input type="reset" value="reset"><br>
<input type="submit" value="submit"><br>
</form>
</body>
</html>- 라디오 버튼의 name 속성을 이용해 여러 대상 중 하나만 선택하는 형태
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>experience</title>
</head>
<body>
<form >
<table>
<tr>
<td><label for="username">이름</label></td>
<td><input id="username" type="text" name="username"></td>
</tr>
<tr>
<td>성별</td>
<td>
<input id="man" type="radio" name="gender" value="m">
<label for="man">남자</label>
<input id="woman" type="radio" name="gender" value="w">
<!-- 동그라미 체크박스를 만들려면 type 은 radio가 되어야함. name은 db에 만들어진 필드이름 id 는 내가 주고싶은 값(내가 설정하면 됌)
label을 쓰는 이유, 입력칸이 있을 경우 사용자가 편리하다.( input 타입일때만 사용한다.)
name 속성은 같게해야한다. -->
<label for="woman">여자</label>
</td>
</tr>
</table>
<input type="submit" value="가입">
</form>
</body>
</html>| 이름 | |
| 성별 | 남자 여자 |
name="요소이름" 을 누락시, db 어디에 저장할지 모르니 주의해주는 것이 좋다.
input 태그 주요 속성
자동으로 입력 커서 나타내기, autofocus 속성
<input type = "text" autofocus>
힌트를 표시해주기, placeholder 속성
<input type ="tel" placeholder="숫자만입력해주세요.">
(input 태그 중에서 가장 중요한 key 포인트라고 생각하면된다)
아래 예시처럼 출력하려면 어떻게 해야하는가 ?
폼 작성하기
아이디 :
비밀먼호 :
검색 :
홈페이지 주소 :
이메일 주소 :
tel :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>experience</title>
</head>
<body>
<h3>폼 작성하기</h3>
<hr width="30%" align="left">
<form method="post" autocomplete="off">
아이디 : <input type="text" name="id"> <br>
비밀먼호 : <input type="password" name="password" ><br><br>
<hr width="30%" align="left">
검색 : <input type="search" name="search"><br>
홈페이지 주소 : <input type="url" name="hompage"><br>
이메일 주소 : <input type="email" name="mail"> <br>
tel : <input type="tel" name="cellphone"><br>
<hr width="30%" align="left">
</form>
</body>
</html>아래 예시처럼 출력하려면 어떻게 해야하는가 ?
나이 :
사과갯수 (1개 단위) :
날짜 :
주문월 :
주문한 주 :
연락 받을 연락처 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>experience</title>
</head>
<body>
<hr width="30%" align="left">
<form method="post" autocomplete="off">
나이 : <input type="number" name="age"> <br>
사과갯수 (1개 단위) : <input type="range" name="height" value="1"><br>
날짜 : <input type="date" name="day"><br>
주문월 : <input type="month" name="ordderMonth"><br>
주문한 주 : <input type="week" name="orrderWeek"> <br>
연락 받을 연락처 : <input type="tel" name="cellphone"><br>
</form>
</body>
</html>
컴퓨터공학과에 재학중이며, 백엔드를 지향하고 있습니다. 많이 부족하지만 열심히 노력해서 실력을 갈고 닦겠습니다. 부족하고 틀린 부분이 있을 수도 있지만 이쁘게 봐주시면 감사하겠습니다. 틀린 부분은 댓글 남겨주시면 제가 따로 학습 및 자료를 찾아봐서 제 것으로 만들도록 하겠습니다. 귀중한 시간 방문해주셔서 감사합니다.