코딩 스쿨 HTML

1. action

폼 데이터를 전송할 URL을 지정합니다.

<form action="/submit-form" method="post">

2. method

폼 데이터를 서버로 전송하는 방식을 지정합니다. GET 또는 POST를 사용합니다.

<form action="/submit-form" method="post">

3. enctype

폼 데이터를 서버로 전송할 때 인코딩 방식을 지정합니다.

<form action="/submit-file" method="post" enctype="multipart/form-data">

4. autocomplete

브라우저가 입력 필드의 값을 자동으로 완성할지 여부를 설정합니다. on 또는 off를 사용할 수 있습니다.

<form action="/submit" method="post" autocomplete="off">

5. target

폼 데이터를 제출할 때 결과가 표시될 창을 지정합니다.

<form action="/submit" method="post" target="_blank">

6. novalidate

HTML5 기본 유효성 검사를 비활성화합니다.

<form action="/submit" method="post" novalidate>

7. name

폼의 이름을 지정하여 서버에서 참조할 수 있습니다.

<form action="/submit" method="post" name="myForm">

8. input 태그의 주요 속성

8.1 type

입력 필드의 유형을 지정합니다.

<input type="text"> <!-- 일반 텍스트 입력 -->

8.2 name

입력 필드의 이름을 지정합니다.

<input type="text" name="username">

8.3 value

입력 필드의 기본 값을 설정합니다.

<input type="text" name="username" value="기본값">

8.4 placeholder

입력 필드에 힌트 텍스트를 표시합니다.

<input type="text" name="username" placeholder="사용자 이름 입력">

8.5 required

필수 입력 필드로 설정합니다.

<input type="text" name="username" required>

8.6 readonly

읽기 전용 필드로 설정하여 사용자가 값을 수정할 수 없게 만듭니다.

<input type="text" name="username" value="고정된 값" readonly>

8.7 disabled

입력 필드를 비활성화합니다.

<input type="text" name="username" disabled>

8.8 maxlength

입력할 수 있는 최대 문자 수를 제한합니다.

<input type="text" name="username" maxlength="20">

8.9 min / max

숫자 입력 필드에서 입력 가능한 최소값과 최대값을 지정합니다.

<input type="number" name="age" min="1" max="100">

8.10 step

숫자 입력 필드에서 값의 증가 단위를 설정합니다.

<input type="number" name="age" min="0" max="100" step="5">

8.11 pattern

정규 표현식을 사용하여 입력 값을 검증합니다.

<input type="text" name="username" pattern="[A-Za-z]{3,}">

8.12 accept

파일 입력 필드에서 선택 가능한 파일 형식을 제한합니다.

<input type="file" name="resume" accept=".pdf,.doc,.docx">

8.13 multiple

파일 선택 시 여러 파일을 선택할 수 있게 합니다.

<input type="file" name="images" accept="image/*" multiple>

예시 코드

<form action="/submit-form" method="post" enctype="multipart/form-data" autocomplete="on" target="_self">
    <label for="username">사용자 이름:</label>
    <input type="text" id="username" name="username" placeholder="사용자 이름 입력" required maxlength="20">

    <label for="email">이메일:</label>
    <input type="email" id="email" name="email" placeholder="이메일 입력" required>

    <label for="age">나이:</label>
    <input type="number" id="age" name="age" min="1" max="120" step="1" required>

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

    <label for="resume">이력서 업로드:</label>
    <input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx">

    <input type="submit" value="제출">
</form>