티스토리 뷰

HTML

Form - input & label

baegofda_ 2021. 8. 16. 18:37

* input

  • 사용자가 정보를 입력하고 입력을 받기 위함
  • <input type=""/> 의 형식으로 type attribute를 무조건 기재를 해야한다.
  • type : text, email, password, number, file, tel, button, submit ....
  • type 이외에도 value(초기값)나 required, disable(사용불가).. 등등 있으나 필수는 아니다.

* <input type="text"/>

  • placeholder : input창에 띄어놓는 문구로 클릭시 사라지게된다. (안내문구)
  • minlength : 최소 문자 길이를 제한한다.
  • maxlength : 최대 문자 길이를 제한한다.
  • required : 필수적으로 받아야하는 input창에 요청을 한다.
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <title>Form - Input</title>
        <link
            rel="stylesheet"
            href="https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css"
            rel="stylesheet"
            type="text/css"
        />
        <link rel="stylesheet" href="./styles.css" />
    </head>

    <body>
        <form action="" method="POST">
            <input
                type="text"
                placeholder="아이디를 입력하세요"
                minlength="5"
                maxlength="13"
                required
            />
            <button type="submit">submit</button>
        </form>
    </body>
</html>

placeholder 이용

minlength에 의해 에러문구가 발생

maxlength에 의하여 14자이상은 입력이 불가능하다.
required에 의해 미기입시 에러문구 발생

* <input type="email"/>

  • 이메일 형식에 맞는 input을 받을 수 있다.
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <title>Form - Input</title>
        <link
            rel="stylesheet"
            href="https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css"
            rel="stylesheet"
            type="text/css"
        />
        <link rel="stylesheet" href="./styles.css" />
    </head>

    <body>
        <form action="" method="POST">
            <input type="email" placeholder="이메일을 입력하세요" required />
            <button type="submit">submit</button>
        </form>
    </body>
</html>

이메일 형식인 @를 미기입시 에러문구 발생

* <input type="password"/>

  • type="text"와 같은 attribute를 사용하며 입력시 텍스트가 표기되지않는다.
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <title>Form - Input</title>
        <link
            rel="stylesheet"
            href="https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css"
            rel="stylesheet"
            type="text/css"
        />
        <link rel="stylesheet" href="./styles.css" />
    </head>

    <body>
        <form action="" method="POST">
            <input
                type="password"
                placeholder="비밀번호를 입력하세요"
                minlength="5"
                maxlength="13"
                required
            />
            <button type="submit">submit</button>
        </form>
    </body>
</html>

비밀번호 입력시 텍스트형식이아닌 점으로 표시된다.

* <input type="number"/>

  • min : minlength와 비슷하게 최소 입력가능 숫자를 제한한다.
  • max : maxlength와 비슷하게 최대 입력가능 숫자를 제한한다.
  • 숫자가 아닌 텍스트를 기입시 에러문구가 발생한다.
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <title>Form - Input</title>
        <link
            rel="stylesheet"
            href="https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css"
            rel="stylesheet"
            type="text/css"
        />
        <link rel="stylesheet" href="./styles.css" />
    </head>

    <body>
        <form action="" method="POST">
            <input
                type="number"
                placeholder="나이를 입력하세요"
                min="12"
                max="65"
                required
            />
            <button type="submit">submit</button>
        </form>
    </body>
</html>

숫자가아닌 텍스트 입력시 에러문구 발생

min="12" 보다 낮은 값을 입력시에 에러문구 발생

max="65" 보다 높은 값을 입력시에 에러문구 발생

* <input type="file"/>

  • 파일 첨부를 위한 type
  • accept attribute를 이용하여 원하는 확장자를 지정 할 수 있다. (필수는 아님)
  • multiple attribute를 이용하여 한번에 여러 파일을 받을 수 있다. <input type="file" multiple/>
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <title>Form - Input</title>
        <link
            rel="stylesheet"
            href="https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css"
            rel="stylesheet"
            type="text/css"
        />
        <link rel="stylesheet" href="./styles.css" />
    </head>

    <body>
        <form action="" method="POST">
            <input type="file" accept=".png, .jpg" />
            <input type="file" accept="image/*, audio/* " />
        </form>
    </body>
</html>

accept=".png, .jpg" 에 의해 지정된 확장자가 선택되게 되어있다.

* label

  • 양식의 이름
  • for attribute를 사용하며 필수적으로 기재해야한다.
  • <label for="인풋의 id"></label> 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <title>Form - Input</title>
        <link
            rel="stylesheet"
            href="https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css"
            rel="stylesheet"
            type="text/css"
        />
        <link rel="stylesheet" href="./styles.css" />
    </head>

    <body>
        <form action="" method="POST">
            <label for="input-id">아이디</label>
            <input
                id="input-id"
                type="text"
                placeholder="아이디를 입력하세요"
                minlength="5"
                maxlength="13"
                required
            />
            <button type="submit">submit</button>
        </form>
    </body>
</html>

input 위에 아이디라는 label이 생성되었다.

저작자표시

'HTML' 카테고리의 다른 글

Form - select & option  (0) 2021.08.16
Form - radio & checkbox  (0) 2021.08.16
Form 태그란?  (0) 2021.08.16
Anchor (링크) & Image  (0) 2021.08.16
blockquote & q (인용)  (0) 2021.07.05
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함