HTML로 회원가입 폼 만들기 연습

learning by Seven Fingers Studio 8분
HTML인프런Precamp회원가입폼입문코딩독학

인프런 Precamp 강의 첫 시간, HTML로 회원가입 폼을 만들며 block 태그와 inline 태그 차이를 실습했다.

혼자 따라 치면서 input, select, button 구조를 손에 익히게 된 기록을 정리했다.

Block vs Inline 태그

한 줄을 전부 차지하는 block 태그(<div>, <h1>)와 콘텐츠만큼만 차지하는 inline 태그(<span>, <input>)를 나란히 배치해 보며 레이아웃 차이를 체감했다.

폼 안에서 input이 자동으로 내려오는 이유도 이해가 갔다.

input 태그 type별 활용법

input 태그는 type 속성 값에 따라 전혀 다른 입력 필드로 바뀐다.

  • text: 이메일·이름처럼 평문 입력
  • password: 비밀번호 마스킹 처리
  • radio: 여러 선택지 중 하나만 고르기

특히 radio는 name 속성을 동일하게 맞춰야 같은 그룹으로 인식돼 하나만 선택된다는 점을 실수로 배웠다.

select로 드롭다운 박스 만들기

select 태그 안에 option을 나열하면 드롭다운 목록이 만들어진다.

첫 번째 option에 disabled="true", selected="true"를 주면 “지역을 선택하세요” 같은 안내 문구를 처음에 보여줄 수 있다.

사용자가 실수로 공백을 제출하는 걸 막고 싶을 때 유용하다.

button vs input type=“button”

과거엔 <input type="button" value="가입하기" />로 버튼을 만들었지만 요즘엔 <button>가입하기</button> 형식을 선호한다.

button 태그 안에 아이콘·이미지를 넣거나 CSS로 시각 효과를 자유롭게 꾸밀 수 있기 때문이다.

button 태그 안에 아이콘·이미지를 넣거나 CSS로 시각 효과를 자유롭게 꾸밀 수 있기 때문이다.

코딩 입문자가 HTML을 학습하며 실습하는 모습

실습 코드 전문

강의에서 작성한 전체 HTML 코드는 아래와 같다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>회원가입</title>
  </head>
  <body>
    <h1>회원가입</h1>
    <br />
    <input type="text" placeholder="이메일을 입력해 주세요." /><br /><br />
    <input type="text" placeholder="이름을 입력해 주세요." /><br /><br />
    <input
      type="password"
      placeholder="비밀번호를 입력해 주세요."
    /><br /><br />
    <input
      type="password"
      placeholder="비밀번호를 다시 입력해 주세요."
    /><br /><br />
    <select>
      <option disabled="true" selected="true">지역을 선택하세요.</option>
      <option>서울</option>
      <option>경기</option>
      <option>인천</option></select
    ><br /><br />
    <input type="radio" name="gender" value="female" />여성
    <input type="radio" name="gender" value="male" />남성<br /><br />
    <input type="checkbox" />이용약관 개인정보 수집에 동의합니다.<br />
    <hr />
    <button>가입하기</button>
    <!-- <input type="button" value="가입하기" /> -->
  </body>
</html>

class01 signup

코드를 브라우저에 띄워 보니 실제 회원가입 폼이 표시됐다.

운영자 실전 노트

  • radio 버튼에 name 속성을 까먹고 빼먹으면 여러 개가 동시에 선택돼 당황했다—같은 그룹은 반드시 같은 name으로 묶어야 한다.
  • 첫 option에 disabled="true" 없이 selected="true"만 두면 사용자가 다시 그 안내 문구를 선택할 수 있어 유효성 검사에 구멍이 생긴다.
  • 강의 속도가 빨라 손으로 따라 치다 오타가 많았는데, 브라우저 개발자 도구(F12)로 바로바로 확인하니 실수를 빠르게 고칠 수 있었다.

FAQ

Q. radio 버튼이 여러 개 동시에 선택되는 이유는?

각 input에 name 속성을 같게 줘야 브라우저가 동일 그룹으로 인식해 하나만 선택된다. name을 빼먹거나 다르게 쓰면 독립된 항목으로 취급돼 여러 개가 체크된다.

Q. 실습 코드 그대로 따라 쳐도 화면이 다르게 나오면?

HTML만으로는 기본 브라우저 스타일이 적용된다. 정확히 같은 모양을 원하면 CSS를 추가해야 하며, 브라우저(Chrome·Edge 등)마다 기본 디자인이 살짝 다를 수 있다.

← 블로그 목록으로