IT/웹개발 (100일 도전)
Udemy section 10 (28일) - checkbox, textarea, 드롭다운
김숭늉이
2023. 3. 7. 21:32
728x90
체크박스는 크게 두가지의 용도로 사용된다
1. 체크박스 만들기 ( yes on no )
<div class="form-control-inline">
<input type="checkbox" id="agree-terms"/ name="terms">
<label for="agree-terms">Agree to terms?</label>
</div>
name 을 설정하고 버튼으로 제출하면 url에 terms=on으로 표현됨!
2. 체크박스 만들기 ( 2가지 이상 선택지 선택할수잇는 목록을 만들때)
ㄴvalue 요소 추가
ㄴvalue 요소 추가
<div class="form-control-inline">
<input type="checkbox" id="contact-email"/ name="contact">
<label for="contact-email">contact me via email</label>
</div>
<div class="form-control-inline">
<input type="checkbox" id="contact-phone"/ name="contact">
<label for="contact-phone">contact me via phone</label>
</div>
3. text area 시작태그와 종료태그가있다 (내용 없어도)
<textarea></textarea>
input은 한줄만 생성하지만 text area는 여러줄!
input,
textarea{
width: 100%;
display: block;
margin-bottom: 1rem;
box-sizing: border-box;
font: inherit;
border: 1px solid rgb(184, 184, 184);
padding: 0.25rem;
color: rgb(61, 58, 58);
input:focus,
textarea:focus {
background-color: rgb(219, 190, 253);
color: rgb(32, 5, 63);
border-color: rgb(32, 5, 63);
}
-> input에 적용된 css 스타일을 textarea에도 적용!
4. textarea에 문자작성후 제출하면 아래와같이 url형태는 브라우저가 줄바꿈과 특수문자를 url 형식으로 자동변환됨
<label for="usermessage">Your message</label>
<textarea id="usermessage" name="user-message"></textarea>
5. 드롭다운 -> 라디오버튼을 대체 할수잇음
<label for="favorite-color">Your favorite color</label>
<select id="favorite-color">
<option>Blue</option>
<option>Black</option>
<option>Red</option>
</select>
input,
textarea,
select {
width: 100%;
display: block;
margin-bottom: 1rem;
box-sizing: border-box;
font: inherit;
border: 1px solid rgb(184, 184, 184);
padding: 0.25rem;
color: rgb(61, 58, 58);
}
6. name 은 서버에 사용될 식별자를 부여함!
<select id="favorite-color" name="favofite-color">
<option>Blue</option>
<option>Black</option>
<option>Red</option>
</select>
-> select에 name 부여 (라디오 버튼처럼)
만약 사용자에게 부여되는 값과 머신이 읽을수있는 값이 달라야 한다면 option별로 value 부여함
<select id="favorite-color" name="favofite-color">
<option value="blue">My favorite color is blue</option>
<option value="black">Black</option>
<option value="red">Red</option>
</select>
7. 의미론적 관점에서 묶어줌! -> 코드 작업이 쉬워짐!
section, ul, li
<section>
<ul>
<li>
<label for="username">Your name</label>
<input type="text" name="user-name" id="username" />
</li>
<li>
<label for="useremail">Your email address</label>
<input type="email" name="user-email" id="useremail" />
</li>
<li>
<label for="userpassword">Password</label>
<input type="password" name="user-password" id="userpassword" />
</li>
</ul>
</section>
8. h1, text-align으로 center ! 중앙정렬!
9. button 양식 버튼에 대한 추가 정보
1)
<button>Submit</button>
<button type="submit">Submit</button>
ㄴ form 양식 안에 있으면 submit가 디폴트값!
<button type="button">Submit</button>
ㄴ 양식을 제출 하지 않음!
<button type="reset">Submit</button>
ㄴ 칸에 작성한 내용을 삭제함!
10. 속성검증하기
만약에 인풋 이메일 양식에 이메일을 입력하지 않았을 경우!
form에 novalidate 이메일 같은 양식은 속성검증을하는 nobalidate라는 불리언값을 작성해주면 속성검증을 안함!
<label for="username">Your name</label>
<input type="text" name="user-name" id="username" required />
필수 입력값으로 설정! required!!!
<input type="text" name="user-name" id="username" required minlength="7"/>
ㄴ 최소 문자 설정 (minlength는 숫자를 조절!)
<input type="number" step="5" name="user-age" id="user-age" required min="18" max="100"/>
ㄴ 나이 min, max로 설정
<input type="date" name="birthday" id="birthday" required min="1921-01-01" max="2003-01-01"/>
ㄴ 날짜선택에서 그만큼 제한됨!
ㄴ 날짜선택에서 그만큼 제한됨!
<input
type="radio"
name="verify"
id="verify-text-message"
value="text-message"
required
/>
-----> 라디오버튼 required !!
11. placeholder 기능
<input type="text" name="user-name" id="username" required minlength="7" placeholder="kim seungyeon"/>
ㄴ value 는 사용자가 입력한 값으로 취급되지만 placeholder는 아니다!
12. textarea 추가 기능
<textarea id="usermessage" name="user-message" required rows="8"></textarea>
ㄴ 8로 설정하면 textarea 줄이 커짐! (디폴트가 8이 됨!)
textarea {
resize: none;
}
textarea {
resize: vertical;
} -> 위아래로만 움직
====> MDN에서 추가 양식들에 대해서 체크해보기!
728x90
반응형