HTML - form 요소

form 요소는 사용자 입력을 수집하기 위해 사용되는 요소입니다.  HTML form 요소는 다양한 요소와 함께 쓰일 수 있습니다.

 

<input>의 속성에는 type, value, name, id, placeholder, required, readonly, disabled, autofocus 등의 속성이 존재합니다. 이 중 몇 가지만 설명 해보겠습니다

 

type : 입력 필드의 유형을 지정합니다. 어떤 유형을 설정하냐에 따라 입력 방식과 동작이 달라집니다.

value : 입력 필드의 초기값입니다.

name : 입력 필드의 이름을 지정합니다. 폼 데이터를 서버로 제출할 때 이 이름을 사용하여 값과 함께 전송합니다.

id : 입력 필드의 고유한 식별자입니다. JavaScript나 CSS에서 특정 필드를 찾거나 조작하는데 사용될 수 있습니다.

required : 필수

• 텍스트 입력(input type = “text”)

<label for="name">이름:</label>
<input type="text" id="name" name="name" placeholder="이름을 입력하세요">

• 비밀번호 입력(input type = “password”)

<label for="password">비밀번호:</label>
<input type="password" id="password" name="password">

• 이메일 입력(input type = “email”)

<label for="email">이메일:</label>
<input type="email" id="email" name="email" placeholder="이메일을 입력하세요">

• 숫자 입력(input type = “number”)

<label for="age">나이:</label>
<input type="number" id="age" name="age">

• 날짜 선택(input type = "date")

<label for="birthdate">생년월일:</label>
<input type="date" id="birthdate" name="birthdate">

• 체크박스(input type = "checkbox")

<label for="agree">동의:</label>
<input type="checkbox" id="agree" name="agree">

• 라디오 버튼(input type = "radio")

<label for="male">남성:</label>
<input type="radio" id="male" name="gender" value="male">

<label for="female">여성:</label>
<input type="radio" id="female" name="gender" value="female">

• 드롭다운 목록(select)

<label for="country">국가:</label>
<select id="country" name="country">
  <option value="kr">대한민국</option>
  <option value="us">미국</option>
  <option value="jp">일본</option>
</select>

• 파일 업로드(input type="file")

<label for="avatar">프로필 사진:</label>
<input type="file" id="avatar" name="avatar">

• 전송 (input type = "submit")

<form>
	<input type = "text" id ="ID" value = "아이디"><br>
	<input type = "password" id = "password" value = "password"><br>
	<input type = "submit" value = "로그인">
</form>

• 필드셋 (fieldset) : fieldset 요소는 form 요소와 관련된 데이터들을 하나로 묶어주는 역할을 한다. legend 요소는 fieldset 요소 안에서만 사용할 수 있으며, fieldset 요소의 제목 역할을 담당한다

<form>
    <fieldset>
        <legend>계정</legend>
        아이디: <br>
        <input type="text" id = "ID" value = "아이디"><br>
        비밀번호 : <br>
        <input type="password" id = "password" value = "password"><br>
        <input type="submit" value="로그인">
    </fieldset>
</form>

 

아래의 예시는 fieldset 사용 유무에 따른 모양의 변화이다.

 

fildset 없음

fieldset 사용