HTML - form, input type 속성, text area, select, 주요 입력 속성

Web/HTML CSS JS

HTML - form, input type 속성, text area, select, 주요 입력 속성

dev_sr 2020. 10. 22. 19:27

<form>

블록 레벨 요소

입력한 값들을 처리하는 프로그램으로 전달

텍스트, 인라인, 블록 요소 포함

블록 레벨 요소

양식 요소 그룹화

텍스트, 인라인, 블록 요소 포함

<legend> 자식: 그룹화된 서식 제목 정의

서식에서 작성한 값을 처리하는 URL 지정

서식의 값들을 서버 프로그램에 전달하는 방법 정의

get, post

<input>

인라인 요소

데이터 값 입력

type속성에 따라 다양한 폼 컨트롤러 생성

공통으로 name, value 속성을 가짐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
    <form action="#" method="post">
        <fieldset>
            <legend>로그인</legend>
            <p>text: <input type="text" maxlength="5"></p>
            <p>password: <input type="password"></p>
            <p>search: <input type="search"></p>
            <p>email: <input type="email"></p>
            <p>tel: <input type="tel"></p>
            <p>color: <input type="color"></p>
            <p>number: <input type="number" min="1" max="10"></p>
            <p>range: <input type="range" min="1" max="5"></p>
            <p>radio(Y/N): <input type="radio" name="email" checked="checked"><input type="radio" name="email"></p>
            <p>checkbox: 1<input type="checkbox"> 2<input type="checkbox"> 3<input type="checkbox"></p>
            <p>submit: <input type="submit" value="전송"></p>
            <p>reset: <input type="reset" value="취소"></p>
            <p>button: <input type="button" value="버튼"></p>
            <p>image: <input type="image" src="image/button.PNG" alt="이미지 버튼"></p>
            <p>file: <input type="file"></p>
            <p>hidden: <input type="hidden" value="1111"></p>
        </fieldset>
    </form>
</body>
</html>

파일 선택 클릭시

여러줄 입력 가능한 텍스트 박스

<option>중 하나 선택하는 박스

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="#" method="post">
        <fieldset>
            <legend>회원가입</legend>
            <p>가입목적 : <br><textarea rows="5" cols="100"></textarea></p>
            <p>전화번호:
                <select>
                    <option>지역번호</option>
                    <option selected="selected">02</option>
                    <option>031</option>
                    <option>032</option>
                </select>
            </p>
        </fieldset>
    </form>
</body>
</html>

주요 입력 속성

1. placeholder

입력 내용에 대한 힌트 제공

<p>text: <input type="text" maxlength="5" placeholder="텍스트 입력"></p>

2. required

입력 내용이 비어있으면 경고 메세지 출력

<p>password: <input type="password" required="required"></p>

3. autocomplete

입력요소에 자동 완성기능 on/off

<p>search: <input type="search" autocomplete="on"></p>
<p>email: <input type="email" autocomplete="off"></p>

난 왜 안돼..

4. pattern

지정된 문자패턴(정규식)과 입력 내용이 일치하는가 판단

<p>tel: <input type="tel" pattern="\d{3}-\d{3,4}-\d{4}" 
required="required" title="숫자 3자리 3~4자리 4자리 입력"></p>

5. multiple

, 를 이용해서 이메일을 여러개 쓰거나 파일 여러개를 동시에 업로드할 때 사용

<p>file: <input type="file" multiple="multiple"></p>

6. disabled, readonly

disabled: 비활성화

readonly: 입력, 수정 불가

<p>text: <input type="text" maxlength="5" placeholder="입력, 수정 불가" readonly="readonly"></p>
<p>password: <input type="password" required="required" disabled="disabled"></p>

'Web > HTML CSS JS' 카테고리의 다른 글

css - 외부 스타일시트 불러오기, 인라인 스타일 시트, 선택자 (2)	2020.10.23
HTML - 그룹관련 요소, 구조관련 요소, Entity Name (0)	2020.10.23
html - map, text, list, table (0)	2020.10.21
HTML - 블록 레벨 요소, 인라인 요소, a 태그 관련 (0)	2020.10.19
Java Script - 비동기 프로그래밍 2 (async, await, Promise API (all, race)) (0)	2020.09.28

현재글HTML - form, input type 속성, text area, select, 주요 입력 속성

STUDY