반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form-양식폼</title>
</head>
<body>
<!-- class도 태그에 이름을 지어주는 속성 id랑 같다. 두 개의 차이는 id는 중복할 수 없고, class는 중복할 수 있다.
전체 스타일 중에 class는 다른 스타일을 주기위해서 사용 = class는 특정 이름을 줘서 특정한 스타일을 줄 때 사용한다. -->
<form>
<!-- 입력하는 정보를 영역 단위로 나눠줄 때 쓰는 태그 : filedset -->
<fieldset>
<legend>계정정보</legend>
<!-- 보여줄 컨텐츠가 없으면 홀태그를 쓴다(input 태그는 보여주는 정보가 없고 정보를 입력 받는 기능의 태그이므로..) -->
<!-- label 태그는 이름표 태그로 라벨 이름을 클릭하면 입력창이 깜빡인다. label 태그에는 for이라는 속성, input 태그에는 id 속성을 넣어서 서로 연결한다. laber 태그가 input 보다 먼저 작성되어야 한다.(좌에서 우)-->
<label for="userid">아이디 :</label>
<input id="userid" type="text" placeholder="아이디는 7~9 영문자">
<br>
<label for="userpw">비밀번호 :</label>
<input id="userpw" type="password" placeholder="6자 이상 특수문자 포함">
</fieldset>
<fieldset>
<legend>회원정보</legend>
<label for="username">이름 :</label>
<input type="text" id="username">
<br>
<label for="usernumber">전화번호 :</label>
<!-- 첫번째 input 태그에만 id를 적어서 label 속성과 연결해주고, 2번째 이후의 input 태그에는 id를 따로 적지 않아도 됨 -->
<input type="number" id="usernumber">-
<input type="number">-
<input type="number">
<br>
<!-- b태그 처럼 맥락에 아무 상관없이 들어가는 태그인데 거기에 스타일(강조, 기울기 등)도 안들어 간 태그가 span 태그!-->
<span>수신 방법</span>
<!-- name 속성은 보통 개발자들이 쓰는 속성이지만, 기본적으로 둘 중에 하나만 선택하도록 만드는 건 해보자. data는 네임이 같은 게 넘어갈 수 없음. -->
<input type="radio" id="useremail" name="rcv">
<label for="useremail">이메일</label>
<input type="radio" id="usersns" name="rcv">
<label for="usersns">SNS</label>
<label><input type="radio" id="usermail" name="rcv">
<label for="usermail">우편</label>
</fieldset>
<fieldset>
<legend>기타정보</legend>
<span>취미</span>
<input type="checkbox" id="like1">
<label for="like1">영화보기</label>
<input type="checkbox" id="like2">
<label for="like2">게임하기</label>
<input type="checkbox" id="like3">
<label for="like3">산책하기</label>
<br>
<label><input type="checkbox">마케팅정보 수신 동의(선택)<label>
<br>
<!-- 주소와 선택박스를 연결 시키려면 id와 for값을 연결하면 된다. -->
<label for="useraddr">주소</label>
<!-- size는 몇개씩 보이는지 표시하는 속성이고, multiple은 여러 옵션 선택 가능을 의미 -->
<select size="1" id="useraddr" multiple>
<option>서울</option>
<option>경기</option>
<option>충청</option>
<option>전라</option>
<option>경상</option>
<option>강원</option>
</select>
<input type="text" placeholder="자세한 주소를 적어주세요">
<br>
<label for="userpr">자기소개</label>
<!--장문을 입력할 때 쓰는 태그 : textarea /제목이나 날짜 등 쓰는 것은 input 태그를 쓰고 긴 본문(장문)을 입력할 때는 textarea !
textarea는 가이드 글을 쓸 수 있어서 기본적으로 쌍태그임-->
<textarea id="userpr" name="introduction" rows="8" cols="80">자기소개를 입력해주시면 고맙겠습니다.</textarea>
</fieldset>
<input type="submit" value="회원가입">
<!-- value라는 속성을 넣어서 버튼 안의 이름을 바꿀 수 있음 -->
<input type="reset" value="다시작성">
</form>
<h3>id와 for 값을 넣어서 laber 태그와 input 태그를 서로 연결시켜주는 게 포인트</h3>
</body>
</html>반응형
'IT > HTML&CSS' 카테고리의 다른 글
| [HTML] 예제풀기(2021-09-14) (0) | 2021.11.09 |
|---|---|
| [HTML] div 영역 나누기_예제만들기(2021-09-10) (0) | 2021.11.09 |
| [html] 나무위키_예제(HTML 만들기)_기초(2021-09-07) (0) | 2021.11.09 |
| [HTML] 내부스타일시트방식_기초(2021-08-31) (0) | 2021.11.08 |
| [HTML] 인라인스타일_기초(2021-08-31) (0) | 2021.11.08 |