본문 바로가기
HTML

6. form 및 input

삼색이삼랑해 2022. 8. 12. 09:36

  입력 양식 태그 <form>

<form> 태그는 사용자의 입력을 다른 페이지나 프로그램에 전달하기 위한 태그이다.

 

1. 속성

  • action : 입력한 데이터가 전달될 url을 지정. (대상 = jsp, asp, php, 프로그램)
  • method : 입력한 데이터를 전달하는 방식을 지정. GET(기본값)/POST

2. 전송 방식

  • GET : 주소창에 입력한 데이터가 노출됨. 보안상 문제가 없는 짧은 데이터 전송에 적합.
  • POST : 주소창에 입력한 데이터가 노출되지 않음. 길고, 보안상 문제가 있는 데이터 전송에 적합.

  입력 태그 <input>

<input> 태그는 사용자의 입력값을 받기 위한 태그로, 사용자의 입력값은 모두 문자열로 취급되며(산술 연산 불가)

산술 연산을 할 경우 숫자로 변환해야 한다.

 

1. 기본 속성

  • type : input 태그의 모양을 결정하는 속성.
  • name : 전달할 데이터에 붙일 이름을 지정하는 속성.
  • value : 전달할 데이터가 저장되는 속성. 화면에 보여지는 용도. 또는 버튼 type의 input 태그일 경우 출력하는 글자를 작성하는 속성. (버튼 type의 input은 value를 전달하지 않음)

2. type 속성의 값

  • submit : 버튼. form 태그의 action 속성에 지정된 대상으로 input 태그의 name과 value를 전송.
  • reset : 버튼. 한 form 태그에 소속된 모든 input 태그의 value를 초기화.
  • text : 문자열 입력 형식. (기본 형식)
  • password : 문자열 입력 형식. 입력 문자를 자동으로 '●'로 변경.
  • hidden : 화면에 보이지 않는 형식.
  • button : 버튼. 자바스크립트 코드와 연결하여 이벤트를 처리하는 형식.
  • radio : 단일 선택용 입력 형식(Single-choice). 여러 요소 중 하나를 선택하는 용도로 사용. name 속성에 같은 값을 넣어서 하나로 그룹화함.
  • checkbox : 다중 선택용 입력 형식(Multiple-choice). 여러 요소 중 여러개를 선택하는 용도로 사용. name 속성에 같은 값을 넣어서 하나로 그룹화함.
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>로그인</h1>
    <form action="">
        ID : <input type="text" name="id" value=""> <br>
        PWD : <input type="password" name="pwd" value=""> <br>
        <input type="hidden" name="hd" value="숨긴 데이터"> <br>
        <input type="button" value="버튼" onclick="alert('버튼!!!')"> <br>
        <button onclick="alert('버튼2누름')">버튼2</button>
        <input type="submit" value="전송"> <br>
        <input type="reset" value="초기화"> <br>
    </form>
    <hr>
    <form action="">
        <fieldset>
            <legend>지금 먹고 싶은 음식은?</legend>
            <input type="radio" name="food" value="tang">탕수육<br>
            <input type="radio" name="food" value="gal">갈비탕<br>
            <input type="radio" name="food" value="don">돈까스<br>
        </fieldset>
    </form>
    <hr>
    <h2>다중 선택</h2>
    <form action="">
        <fieldset>
            <legend>좋아하는 반려동물은?</legend>
            <input type="checkbox" name="pet" value="cat">고양이<br>
            <input type="checkbox" name="pet" value="dog">강아지<br>
            <input type="checkbox" name="pet" value="rab">토끼<br>
            <input type="submit" value="전송">
        </fieldset>
    </form>
</body>
</html>
  • date : 년-월-일 단위로 날짜를 입력하는 형태.
  • month : 년-월 단위로 날짜를 입력하는 형태.
  • week :  년-주 단위로 날짜를 입력하는 형태.
  • time : 시간 입력 형태.
  • datetime-local : 년-월-일-시간 단위로 입력하는 형태.
  • color : 색상 선택창을 출력하여 원하는 색상을 선택/입력.
  • range : 특정 범위의 숫자를 선택하여 입력하는 형태. min/max 속성으로 하한/상한 설정.
  • file : 업로드용 파일을 선택할 수 있는 형태. 파일 선택창이 뜸. multiple 속성으로 여러 파일을 한 번에 선택.
  • email : 이메일 형식으로 입력을 제한하는 형태.
  • url : 사이트 주소 형식으로 입력을 제한하는 형태.
  • tel : 전화번호 형식으로 입력을 제한하는 형태. pattern 속성으로 형식을 지정. pattern 속성으로 형식을 지정. pattern="\d{2,3}-\d{3,4}-\d{4}" -> 2~3자리-3~4자리-4자리
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>날짜와 시간 입력</title>
</head>
<body>
    <h2>날짜와 시간 입력 형식</h2>
    <form action="">
        <p>생일입력 : <input type="date" name="birth"></p>
        <p>연월입력 : <input type="month" name="dmon"></p>
        <p>연주입력 : <input type="week" name="dweek"></p>
        <p>시간입력 : <input type="time" name="dtime"></p>
        <p>날짜시간 : <input type="datetime-local" name="dlocal"></p>
        <p><input type="submit" value="전송"></p>
    </form>
    <hr>
    <h2>다양한 입력 양식</h2>
    <form action="">
        <h3>입력 양식1</h3>
        <p>색상 : <input type="color" name="color"></p>
        <p>숫자 : <input type="number" name="num" min="0" max="100"></p>
        <p>범위 : <input type="range" name="range" min="-100" max="100"></p>
        <p>파일 선택 : <input type="file" name="file" multiple></p>
        <p><input type="submit" value="전송"></p>
    </form>
    <hr>
    <form action="">
        <h3>입력 양식2</h3>
        <p>이메일 : <input type="email" name="email"></p>
        <p>사이트 : <input type="url" name="url"></p>
        <p>전화번호 : <input type="tel" name="tel" pattern="\d{2,3}-\d{3,4}-\d{4}"></p>
        <p><input type="submit" value="전송"></p>
    </form>
</body>
</html>

 

3. 주요 속성

  • readonly : 읽기 전용. 수정할 수 없도록 지정하는 속성. 반드시 value 값을 넣을 것. submit으로 전송 가능.
  • disabled : 요소를 비활성화 상태로 변경하는 속성. submit으로 전송 불가.
  • size : text 타입의 input 태그의 가로 길이(너비)를 지정. 입력 문자의 개수를 제한하지는 않는다. 'M'의 너비 기준으로 함. size="20" -> 20글자가 들어가는 공간 너비.
  • maxlength : 입력 문자의 개수를 제한하는 속성.
  • placeholder : 힌트 글을 출력하는 속성.
  • required : input 요소를 필수 입력 요소로 만드는 속성.
  • autofocus : 페이지가 열릴 때(또는 새로 고침 할 때) 처음으로 입력받는 input 요소를 지정하는 속성.
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>input 태그 주요 속성</title>
</head>
<body>
    <form action="">
        <h3>readonly</h3>
        <p><input type="text" name="t1" value="이 내용은 변경 불가!" readonly></p>
        <h3>disabled</h3>
        <p><input type="text" name="t2" value="이 내용은 변경 불가!" disabled></p>
        <h3>size</h3>
        <p><input type="text" name="t3" size="10"></p>
        <h3>maxlength</h3>
        <p><input type="text" name="t4" maxlength="5" ></p>
        <h3>placeholder</h3>
        <p><input type="text" name="t5" placeholder="여기에 입력하세요" ></p>
        <h3>required</h3>
        <p><input type="text" name="t6" required></p>
        <h3>autofocus</h3>
        <p><input type="text" name="t7" autofocus></p>
        <p><input type="submit" value="전송"></p>   
    </form>
</body>
</html>

  기타 입력 태그

1. textarea

여러 줄의 문장(문자열)을 입력받는 요소. 시작 태그와 종료 태그 사이의 값을 전송. value는 안 씀.

크기 지정 => rows : 세로 길이(줄 수) / cols : 가로 길이(글자 수) / style="resize: none;" : 사이즈 조절 버튼 없앰.

 

2. select

선택 목록을 출력하는 요소. <option> 태그(항목 출력 태그)와 같이 사용.

<option> 태그의 value 값이 전송된다. (name은 select에 작성)

 

3. datalist

input + select 요소. 일종의 자동완성 기능처럼 동작.

 

4. label

특정 요소의 레이블을 정의하는 요소. 요소의 선택(클릭) 영역을 확장하는 데에 사용.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>텍스트 영역</title>
</head>
<body>
    <form action="">
        <h3>아무 내용이나 많이 작성하세요~~~</h3>
        <textarea name="tarea" cols="30" rows="10"
            style="resize: none;">이건 처음부터 나올 내용</textarea>
    </form>
    <hr>
    <h2>전화번호 입력</h2>
    <form action="">
        <select name="nums">
            <option value="kt">kt</option>
            <option value="skt" selected>skt</option>
            <option value="lg">lg</option>
            <option value="etc">etc</option>
        </select>
    </form>
    <hr>
    <h2>자동차 브랜드(다중선택)</h2>
    <form action="">
        <select name="cars" multiple size="2">
            <option value="hy">현대</option>
            <option value="kia">기아</option>
            <option value="bmw">BMW</option>
            <option value="au">아우디</option>
        </select>
    </form>
    <hr>
    <h2>datalist</h2>
    <form action="">
        <input list="brs" name="brws">
        <datalist id="brs">
            <option value="edge">엣지</option>
            <option value="crome">크롬</option>
            <option value="safari">사파리</option>
            <option value="opera">오페라</option>
        </datalist>
    </form>
</body>
</html>

  참고

1. 이벤트란?

컴퓨터에 의해 감지되고 처리될 수 있는 동작이나 사건. 프로그램은 사용자가 발생시킨 이벤트를 처리하는 명령어 묶음.

이벤트를 처리하는 작업을 '이벤트 핸들링'(Event Handling)이라고 한다. 마우스 클릭, 마우스 무브, 키보드 눌림 등

 

2. 버튼 생성 방법

  • input 태그의 type을 button으로 하여 생성.
  • button 태그로 생성. form 태그 안에 button 태그로 만들 버튼은  input 태그 중 type이 submit인 버튼의 동작을 수행하기 때문에, type="button"을 넣어줌.

'HTML' 카테고리의 다른 글

5. 영역 처리/시맨틱  (0) 2022.08.11
4. 오디오/비디오/특수문자  (0) 2022.08.11
3. List 및 Table  (0) 2022.08.11
2. 기본적인 태그 알아보기  (0) 2022.08.11
1. HTML 기초  (0) 2022.08.11

'HTML' Related Articles

티스토리툴바