코딩하면서 만났었던 문제
- 드롭다운 박스를 만들때 “지역을 선택하세요”는 선택할 수 없게 만들어야 하는데 방법을 몰랐다
- 성별을 남,여 중에 고르는 라디오 버튼을 만들었는데, 둘중에 하나의 값만 선택 되어야 하는데 둘다 선택되는 문제가 있었다
- 라디오 버튼을 만들때 label 태그를 사용하지 않고 input에 직접 값을 줄 수 있는 방법을 몰랐다
문제를 해결해 나간 과정
- option 태그에 disabled = “true” 라는 속성을 지정하여 “지역을 선택하세요” 항목이 선택되지 않게 했다
- 처음에 selected =”true” 속성을 줘 처음페이지를 실행했을때 “지역을 선택하세요” 항목이 선택되어져 있고 해당 항목 외에 다른 항목을 사용자가 선택할 수 있게 처리했다
- 라디오 버튼을 만들때 input 태그를 연결시켜 주기 위해 label 태그를 같이 사용했었다
- 간편하게 만들기 위해 label 태그 없이 input 태그만 사용하여 만들었다
- input 과 label을 연결시켜 주면 해당 input 태그가 무엇에 대한 태그인지 알려 줄수 있어 uiux 측면에서 더 좋은것 같다
결과화면
전체 소스코드
<body>
<h1>회원가입</h1>
<input type="text" name="email" id="" placeholder="이메일을 입력하세요"><br><br>
<input type="text" name="name" id="" placeholder="이름을 입력하세요"><br><br>
<input type="password" name="password" id="" placeholder="비밀번호를 입력해주세요"><br><br>
<input type="password" name="password_ok" id="" placeholder="비밀번호를 다시 입력해주세요"><br><br>
<select name="locals" id="local">
<option disabled="true" selected="true">지역을 선택하세요</option>
<option value="seoul">서울</option>
<option value="inchon">인천</option>
<option value="pangyo">판교</option>
</select>
<br><br>
<input type="radio" id="female" name="gender" value="여성">여성
<!-- <label for="female">여성</label> -->
<input type="radio" id="male" name="gender" value="남성">남성
<!--<label for="male">남성</label> -->
<br><br>
<input type="checkbox" id="signin" name="signin" value="이용약관 개인정보 수집 및 동의"> 이용약관 개인정보 수집 및 동의
<!--<label for="signin">이용약관 개인정보 수집 및 동의</label>-->
<hr>
<button>가입하기</button>
</body>
frontend dev (판교에서 일하는 그날까지)