-id
-password
-file
-text
-radio(1개 선택 박스, 원모양)
-checkbox(여러개 체크박스, 네모모양)
-수량선택, 분류선택
-submit 제출, reset 취소, button
-textarea(여러줄 입력칸)
CODE
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
<style>
#userId{width: 150px; height: 50px;}
fieldset{border: 1px solid #ccc;}
</style>
</head>
<body><!-- action:sumit같은거 제출할때 정보 넘어가도록 만듬.(밑에껀 예시로 그냥씀)-->
<form name="frm1" action="ex.php">
<fieldset>
<legend>회원가입정보</legend>
<ul>
<li>
<label for="userId">아이디</label> <input type="text" id="userId" placeholder="아이디는 이메일형식입니다." maxlength="5" >
</li><!--label처리를 해야 접근성에 통과 꼭 쓰기/name은 생략가능해서안씀 /placeholder:입력전써져있는글씨
maxlength:입력칸글자수설정-->
<li>
<label for="userPw">비밀번호</label>
<input type="password" id="userPw" maxlength="7">
</li>
<li>
<input type="file">
</li>
<li>
<label for="userMail">이메일</label>
<input type="email" id="userMail" required>
<input type="text" id="no" readonly placeholder="읽기만됨">
<!--no 바로위꺼 대충보려고만든거라형식엔안맞음-->
</li>
<!-- required:필수제출설정, readonly:읽기 전용칸-->
</ul>
</fieldset><!--fieldset:비슷한 콘텐츠끼리 묶어주는거,필수x 있어도 없어도 됨 -->
<fieldset>
<legend>신청과목</legend><!-- 동그라미체크박스 1개선택-->
<input type="radio" name="fubject" id="math" value="math"><label for="math">수학</label>
<input type="radio" name="fubject" id="eng" value="eng"><label for="eng">영어</label>
<input type="radio" name="fubject" id="ko" value="ko"><label for="ko">국어</label>
</fieldset>
<fieldset><!-- 네모체크박스 여러개선택 -->
<legend>관심분야</legend><!--id아이디,비밀번호같은건 value값이 자동넘어가는데 체크박스는 안넘어가서 꼭 따로 입력-->
<input type="checkbox" id="movie" value="movie" checked><label for="movie">영화</label>
<input type="checkbox" id="music" value="music"><label for="music">음악</label>
<input type="checkbox" id="book" value="book"><label for="book">독서</label>
<input type="checkbox" id="game" value="game"><label for="game">게임</label>
</fieldset>
<!--checked 미리체크되어있게설정-->
<fieldset>
<legend>선택</legend>
<label for="sel1">수량선택</label><!--없애려면 label달고 display:none처리,그냥안쓰면유효성x -->
<select name="" id="sel1">
<option value="10">10개</option>
<option value="20">20개</option>
<option value="30">30개</option>
<option value="40">40개</option>
<option value="50">50개</option>
</select>
<select>
<optgroup label="이과">
<option value="math">수학</option>
<option value="sien">과학</option>
<option value="bio">생물</option>
</optgroup>
<optgroup label="문과">
<option value="ko">국어</option>
<option value="eng">영어</option>
<option value="text">논술</option>
</optgroup>
</select>
</fieldset>
<input type="submit" value="제출하기">
<input type="reset" value="취소하기">
<input type="button" value="버튼">
<button>버튼</button>
<!-- button 디폴트는 submit -->
<!-- 눌러서 펼쳐지는거 만들때 제출보단 버튼을 이용하는 경우 많음 -->
<textarea></textarea><!--여러줄입력칸(주소같은..) -->
</form>
</body>
</html>
실행 화면 ▼
참고)
특정 속성 선택한 호출방법, 아웃라인 선 안보이게 처리하는 방법
header .search-box input[type='text']{border:none;width: 450px;height: 32px;outline:none;line-height: 32px;font-size: 14px;color: rgb(104, 92, 194);}
** text속성선택 호출 /outline:none;>>마우스포커스올려졌을때 선안보이게**
'HTML & CSS' 카테고리의 다른 글
| 절대값과 상대값 (0) | 2022.05.24 |
|---|---|
| text-align 속성 (0) | 2022.05.23 |
| 여러개로 구성된 하나의 이미지 중 원하는 영역 배경이미지 사용(spritecow 이미지 좌표 확인 사이트) (0) | 2022.05.16 |
| 이미지의 특정영역 누르면 이동하기(maschek.hu 이미지맵 사이트) (0) | 2022.05.16 |
| 메뉴에 hover시 글자 아래에 밑줄 생기기(transition) (0) | 2022.05.16 |
