본문 바로가기
WebDev/HTML & CSS

[기초]HTML form, input 태그

by Naerrow 2024. 8. 9.

<form> 태그

  • 용도: <form> 태그는 사용자 입력을 받을 수 있는 폼을 정의합니다. 폼 안에 다양한 입력 요소(input elements)들을 포함할 수 있습니다.
  • 특성:
    • 폼의 데이터를 서버로 전송할 때 사용됩니다.
    • action 속성: 폼 데이터를 전송할 URL을 지정합니다.
    • method 속성: 데이터를 전송하는 방법을 지정합니다. 일반적으로 GET과 POST가 사용됩니다.

예시:

<form action="/submit-form" method="post">
  <label for="name">이름:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">이메일:</label>
  <input type="email" id="email" name="email">
  
  <input type="submit" value="제출">
</form>

<input> 태그

  • 용도: <input> 태그는 다양한 타입의 사용자 입력 필드를 정의합니다. type 속성의 값에 따라 다양한 입력 필드를 생성할 수 있습니다.
  • 주요 속성:
    • type: 입력 필드의 타입을 지정합니다. (예: text, password, submit, radio, checkbox, email, number, date 등)
    • name: 폼 데이터 전송 시 서버에서 입력 필드를 식별하기 위해 사용됩니다.
    • value: 입력 필드의 초기값을 지정합니다.
    • placeholder: 입력 필드에 힌트 텍스트를 표시합니다.
    • required: 입력 필드가 필수 항목임을 지정합니다.
  • 주요 타입:
    • 텍스트 입력 (type="text"): 단일 행의 텍스트를 입력받습니다. 
    • 비밀번호 입력 (type="password"): 비밀번호를 입력받습니다. 입력한 텍스트가 화면에 표시되지 않습니다.
    • 이메일 입력 (type="email"): 이메일 주소를 입력받습니다. 브라우저에서 이메일 형식을 검증합니다.
    • 숫자 입력 (type="number"): 숫자를 입력받습니다. min, max, step 속성을 사용해 숫자 범위와 증감을 설정할 수 있습니다.
    • 날짜 입력 (type="date"): 날짜를 입력받습니다.
    • 라디오 버튼 (type="radio"): 여러 옵션 중 하나를 선택할 수 있습니다. 같은 name 속성을 가진 여러 라디오 버튼 중 하나만 선택할 수 있습니다.
    • 체크박스 (type="checkbox"): 여러 개의 옵션을 선택할 수 있습니다.
    • 제출 버튼 (type="submit"): 폼 데이터를 서버로 전송합니다.

예시:

<!--텍스트 입력-->
<input type="text" name="username" placeholder="사용자 이름">

<!--비밀번호 입력-->
<input type="password" name="password">

<!--이메일 입력-->
<input type="email" name="email" placeholder="이메일 주소">

<!--숫자 입력-->
<input type="number" name="age" min="1" max="100">

<!--날짜 입력-->
<input type="date" name="birthdate">

<!--라디오 버튼-->
<input type="radio" name="gender" value="male"> 남성
<input type="radio" name="gender" value="female"> 여성

<!--체크박스-->
<input type="checkbox" name="subscribe" value="newsletter"> 네로우 블로그 구독

<!--제출 버튼-->
<input type="submit" value="제출">

 

 

모든 요소를 포함한 예시:

<!DOCTYPE html>
<html>
<head>
  <title>폼 예제</title>
</head>
<body>
  <form action="/submit-form" method="post">
    <label for="username">사용자 이름:</label>
    <input type="text" id="username" name="username" placeholder="사용자 이름 입력" required>
    
    <label for="password">비밀번호:</label>
    <input type="password" id="password" name="password" required>
    
    <label for="email">이메일:</label>
    <input type="email" id="email" name="email" placeholder="example@example.com">
    
    <label for="age">나이:</label>
    <input type="number" id="age" name="age" min="1" max="100">
    
    <label for="birthdate">생일:</label>
    <input type="date" id="birthdate" name="birthdate">
    
    <label for="gender">성별:</label>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">남성</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">여성</label>
    
    <label for="subscribe">네로우 블로그 구독:</label>
    <input type="checkbox" id="subscribe" name="subscribe">
    
    <input type="submit" value="제출">
  </form>
</body>
</html>

 

이 예제는 사용자가 정보를 입력하고 제출할 수 있는 기본적인 폼을 보여줍니다. 폼을 통해 입력된 데이터는 POST 메서드를 통해 /submit-form URL로 전송됩니다. 각 입력 필드는 name 속성을 가지고 있어 서버에서 데이터를 식별할 수 있습니다.

저작자표시 비영리 변경금지

'WebDev > HTML & CSS' 카테고리의 다른 글

[기초]CSS란 무엇인가?  (0) 2024.08.11
[기초]HTML 의미론적 태그(sematic)  (0) 2024.08.10
[기초]HTML 그룹화(div, span)와 속성(class, id)  (0) 2024.08.08
[기초]HTML 태그 종류(제목, 문단, 서식, 라디오, 링크, 이미지, 오디오, 비디오)  (0) 2024.08.07
[기초]HTML 태그 정리(단일, 블록, 인라인)  (0) 2024.08.06

관련글

티스토리툴바