HTML

10. HTML Forms

okthatsimple 2024. 7. 8. 21:51

HTML Form

목적

  • 웹사이트에 상호작용 기능을 넣을 떄 사용
  • 설문 조사, 사이트 검색 기능 등
  • 구성 tag : input, button, select, textarea, label, fieldset, legend, datalist, output

    예시

    <!DOCTYPE html>
<body>
  <form>
      <label for="firstname">First Name</label>
      <input type="text" id="firstname" name="firstname" placeholder="Enter your first name" required>
      <label for="lastname">Last Name</label>
      <input type="text" id="lastname" name="lastname" placeholder="Enter your last name" required>
      <input type="submit" value="Submit">
  </form>
</body>
</html>

input

목적

  • 사용자 입력 받기
  • <input type="text"/>
    • type은 다음 중 하나를 입력할 수 있다.
    • text, password, checkbox, radio, submit, button, file, number, date, email, color, range, hidden, image

예시

<!DOCTYPE html>
<html>
<body>
    <form>
        <label>Name </label>
        <input type="text" name="name" value="name">
        <input type="submit" value="Submit form">
    </form>
</body>
</html>

button

목적

  • 클릭

예시

<!DOCTYPE html>
<html>
<body>
    <button type="button" onclick="alert('Clicked!')">Click Here</button>
</body>
</html>

select

목적

  • 드롭다운

예시

<!DOCTYPE html>
<body>
    <select>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
        <option value="D">D</option>
    </select>
</body>
</html>