상호작용하는 태그들에 속성들에 대해 빠르게 알아보기
속성 종류
1. maxlength : 글자 수 제한하기
See the Pen Untitled by Super Novice (@Super-Novice-the-typescripter) on CodePen.
설명
입력 요소의 글자수를 제한한다.
2.checked : checkbox 나 radio 버튼에 사용시 해당 버튼이 선택된다.
See the Pen Untitled by Super Novice (@Super-Novice-the-typescripter) on CodePen.
설명
checkbox는 복수 선택이 가능하므로 해당 속성을 중복해서 사용가능하다.
radio버튼 사용시 단일 선택만가능하므로 하나의 요소에만 적용해야한다.
라디오 버튼 사용시에 name을 통일해야함 하나의 raio로 인식하는거같다. (어떻게 그룹짓게되는건지 계속생각하다 <div> 태그로 묶어보고 <form>태그로 묶어봐도 자꾸 단일로 동작하길래 보니까 name을 동일하게 줘야 정상동작한다.
그도 그럴것이 해당 라디오의 선택을 서버에 보내야할텐데 name을 통일안하면 서버에 데이터를 보낼때 문제가 될것이니.. 당연한거였다.
3.placeholder : 입력텍스트의 힌트를 지정한다.
See the Pen Untitled by Super Novice (@Super-Novice-the-typescripter) on CodePen.
설명
어떠한 입력란에 무엇을 입력해야할지를 알려줌.
4.disabled : 해당 태그를 비활성화한다.
See the Pen Untitled by Super Novice (@Super-Novice-the-typescripter) on CodePen.
설명
상호작용태그를 비활성화한다. input ,textarea,select,button과 같은 태그에서 사용가능하다.
5.readonly : 상호작용 태그를 읽기전용으로 만듬.
See the Pen Untitled by Super Novice (@Super-Novice-the-typescripter) on CodePen.
설명
속성 적용시에 읽기전용으로 변경되며 읽기전용이기때문에 글을 쓸수는 없지만 드래그 해서 복사는 가능함.
응용해보기
- 시나리오 작성
저번에 로그인 화면을 구성하였다면 이번에는 회원가입 화면을 만들기로 했다.
회원 가입에는 아주 간단한 정보만을 입력받기로 했다. 해당 블로그는 동물을 사랑하는 모임이다. 그리고 초기화 하는버튼이있었으나 일시적으로 사용불가능하게 하였다.
입력받을 정보
1.아이디(maxlegnth = 12)
2.비밀번호(maxlegnth = 12)
3.좋아하는 동물(복수선택)
4.최애동물(단일선택)
5.작성완료 버튼(서버 전송{회원 정보는 중요하므로! post방식으로 보낼것})
6.초기화 버튼(일시적으로 비활성화시킴)
7.운영자의 한마디(읽기전용)
See the Pen Untitled by Super Novice (@Super-Novice-the-typescripter) on CodePen.
vscode에서 작성한 풀코드
<!DOCTYPE html>
<html lang="ko">
<head>
<title>동물들을 사랑하는 모임 회원가입 페이지</title>
</head>
<body>
<form action="#" method="post">
<fieldset>
<legend>회원가입 양식</legend>
<p>
<label for="userid">아이디</label>
<input type="text" id="userid" placeholder="최대12자리." maxlength="12">
</p>
<p>
<label for="userpw">비밀번호</label>
<input type="password" id="userpw" placeholder="최대12자리." maxlength="12">
</p>
<p><strong>좋아하는 동물</strong></p>
<ul>
<li>좋아하는 동물들을 마음껏 골라주세요(한마리 필수)</li>
<input type="checkbox" id="cat" checked>
<label for="cat">고양이</label>
<input type="checkbox" id="dog">
<label for="dog">강아지</label>
<input type="checkbox" id="mouse">
<label for="mouse">쥐</label>
<li>최애동물은?</li>
<input type="radio" name="animal" id="radiocat" checked>
<label for="radiocat">고양이</label>
<input type="radio" name="animal" id="radiodog">
<label for="radiodog">강아지</label>
<input type="radio" name="animal" id="radiomouse">
<label for="radiomouse">쥐</label>
</ul><br>
<p><strong>운영자의 한마디</strong></p>
<textarea readonly>안녕하세요 운영자입니다.만나서 반갑습니다. 동물들을 좋아하시는만큼 매너를 지켜서 좋은활동 부탁드려요</textarea><br>
<button type="submit">작성완료</button>
<button type="reset" disabled>초기화버튼</button>
</fieldset>
</form>
</body>
</html>하.. 글을 작성할때마다 이게 맞는건지 항상고민된다.
웹 개발자로 전향하려고 하다가 웹퍼블리셔가 되는거 아닌지. 심히 걱정스럽다. 하지만 멈춰있는것보단 계속 진행이되고 있고.
태그들을 응용해서 무언가를 만들면서 뭔가 html도 익숙해져가고 있다. 안드로이드에서 레이아웃잡는것에 익숙한 나에게는 좀 거지같은 문법이지만. 그래도 계속 익숙한것을 하는것보다 새로운것을 깨닫고 습득하는것이 개발자의 길이 아니겠는가 ! HTML문법도 이제 표만들기만 하면 끝이난다. 빨리 css하고 프로그래밍 언어로 들어가야지..
'제1장 HTML' 카테고리의 다른 글
| 16.비디오,오디오 태그 (0) | 2023.09.17 |
|---|---|
| 15.표만들기! (0) | 2023.09.17 |
| 13.button 태그 (0) | 2023.09.14 |
| 12.콤보박스(select, option, optgroup) (0) | 2023.09.13 |
| 11.여러줄 택스트 입력(textarea) (0) | 2023.09.13 |