로그인 형태를 만들기 위해서 HTML 에서 form 태그 속성을 사용한다.
ㅡ form 태그
입력 양식 태그
사용자로 부터 입력받은 데이터를 서버로 전송시키는 역할
모든 입력 양식 태그의 부모 역할을 한다.
1. input 태그는 단독사용한다. inline-block 요소
유저가 입력할 수 있는 ui (영역)을 생성해준다.
2. placeholder 속성은 input 에 내용을 미리 보기 가능
<비밀번호는 password 로 사용하기>
ㅡ버튼생성하기
<예제1>
1. 버튼ui(형태)생성
1.예제
>>>>>>>>>>>>>
value 속성으로 버튼 안의 내용 작성 가능, on off 기능으로 가능함
<input type="text" placeholder="입력해주세요" />
아이디 : <input type="text" placeholder="아이디" /><br />
비밀번호 : <input type="password" placeholder="비밀번호" />
2. 시멘틱태그의 버튼으로 사용.
form 태그 안에서 기능을 실행시켜 줌.입력 값을 제출할때 쓰는 기능을 한다.
2,3 예제
>>>>>>>>>>>>>>
form 태그 안에서 기능을 실행시켜 줌.입력 값을 제출할때 쓰는 기능을 한다.
<input type="button" value="버튼" />
<button>버튼2</button>
3. value 로 바꿔줘서 시멘틱태그인<button>과 동일한 기능 실행가능함
<input type="submit" value="인증요청" />
4.radio 속성값은 하나만 선택일때 사용 함
4,예제
>>>>>>>>>>>
radio는 name이라는 속성과 사용해서 같은 그룹의 인풋끼리 묶어줘야 함
5.label 태그는 iput 과 묶어줄때 사용함
반드시 같이 묶일 input 태그의 id 값을 for 속성값 안에 지정해 줘야함
<input type="radio" id="tab_1" name="tab" />
<label for="tab_1">남자</label>
<input type="radio" id="tab_2" name="tab" />
<label for="tab_2">여자</label>
<input type="radio" id="tab_3" name="tab" />
<label for="tab_3">기타 </label> <br /><br />
6.checkbox 는 체크박스 생성으로 다중선택 할때 사용함
6,예제
>>>>>>>>>>>>>>>>>>
<input type="checkbox" id="check" />
<label for="check">이용약관</label><br /><br />
<input type="checkbox" id="agree" />
<label for="agree">동의함</label></br>
7.시간, 날짜
>>>>
예약시간 : <input type="time" /><br />
예약날짜 : <input type="date" /><br />
<예제2 폼태그 로그인형태 만들기>
<예제2 풀이>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>로그인 형태 예제</title>
<style>
.login {
width: 300px;
height: 250px;
border: 2px solid rgb(228, 228, 228);
border-radius: 10px;
text-align: center;
margin: 100px auto;
}
.login > input {
width: 190px;
height: 35px;
border: 2px solid rgb(228, 228, 228);
border-radius: 40px;
/* background-color: antiquewhite; */
margin-bottom: 10px;
font-size: 13px;
color: rgb(123, 123, 123);
padding: 5px;
box-sizing: border-box;
}
button {
width: 190px;
height: 35px;
border: 2px solid;
border-radius: 40px;
background-color: rgb(220, 107, 107);
color: aliceblue;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="login">
<h3>로그인</h3>
<input type="text" placeholder="아이디" /><br />
<input type="password" placeholder="패스워드" /><br />
<button>로그인</button>
</div>
</body>
</html>
