본문 바로가기
코딩 공부/HTML + CSS

[HTML+CSS] 06_입력양식만드

chocbi 2020. 5. 9. 18:06

입력양식 만들기

#01. 기본 입력 양식

  • XHTML까지 사용되던 입력 양식 태그

#02. 텍스트 입력 받기

  • 입력 양식을 표시하는 <input>태그

    • name속성과 id 속성
      • name 속성은 웹 프로그램과 연계되는 속성으로 한페이지 안에서 고유한 값을 명시해야 한다.
      • id 속성은 해당 페이지에서 그 요소를 식별하기 위한 값으로 고유한 값을 명시해야 한다.
      • id값과 name값은 서로 동일하게 지정해도 무관하다.
    • type 속성에 따라 화면에 표시되는 요소의 종류가 결정된다.(text, password, hidden 등)
    • value 속성은 해당 요소에 기본적으로 작성되어 있을 값을 기술한다.
    • 텍스트를 입력 받는 요소의 경우 maxlength 속성을 사용하여 최대 입력 가능한 글자 수를 제한할 수 있다.
    <input name="이름(영어)" id="식별자(영어)" type="종류" value="기본값" maxlength="숫자" />

  • 요소의 제목 표시하기

    • <label>태그는 입력 요소 앞이나 뒤에서 표시되는 제목을 구성한다.
    • <label>태그와 <input>태그의 순서는 변경될 수 있으며, 반드시 함께 연달아 표시될 필요는 없다.
    <labelfor="input요소에 부여한 id값">...제목...</label> <inputname="이름(영어)"id="식별자(영어)"type="종류" [value="기본값"][maxlength="숫자"][checked]/>

  • 장문을 입력하기 위한 요소

    <label for="input요소에 부여한 id값">...내용...</label> <textarea name="이름(영어)"id="식별자(영어)"[maxlength="숫자"]> ...기본적으로 작성되어 있을 내용 ... </textarea>

  • placeholder 속성

    <input name="이름(영어)"id="식별자(영어)"type="종류" [value="기본값"][maxlength="숫자”] [placeholder="설명글"] />
    • placeholder 속성은 사용자가 직접 값을 입력하는 형태의 <input>요소에 지정하여 값이 입력되기 전에 보여질 설명글을 표시한다.
    • HTML5부터 지원한다.

01-텍스트입력하기

<!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->

<head>
    <!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
    <meta charset="utf-8" />
    <!--IE의 호환성 보기 모드 금지-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 스마트 장치에서의 해상도 균일화 처리-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--브라우저에 표시될 문서 제목-->
    <title>My Web Page</title>
</head>
<!-- 브라우저에 보여질 부분 -->

<body>
    <!-- 입력 내용을 감싸기 위한 부분-->
    <form>
        <!--입력 내용에 대한 그룹을 명시하는 부분 -->
        <fieldset>
            <!-- 그룹의 제목-->
            <legend>내용 입력하기</legend>
            <!--입력 요소 배치-->
            <div>
                <label for="user_id">아이디</label>
                <input type="text" name="user_id" id="user_id" maxlength="20" placeholder="아이디를 입력하세요." />
            </div>
            <div>
                <label for="user_name">회원이름</label>
                <input type="text" name="user_name" id="user_name" maxlength="20" placeholder="이름을 입력하세요" />
            </div>
            <div>
                <label for="user_pw">비밀번호</label>
                <input type="password" name="user_pw" id="user_pw" maxlength="20" placeholder="비밀번호를 입력하세요." />
            </div>
            <div>
                <label for="memo">자기소개</label>
                <textarea name="memo" id="memo" maxlength="100" placeholder="간단한 소개 내용을 입력하세요."></textarea>
            </div>
            <div>
                <label for="data">숨겨진 항목</label>
                <input type="hidden" name="data" id="data" value="숨겨진 데이터" />
            </div>
        </fieldset>
    </form>
</body>

</html>

출력결과

#02. 선택항목의 제시

  • type=“radio” or type=“checkbox”
    • 여러 개의 항목 중 한 가지 혹은 복수의 선택을 할 수 있는 요소를 구성한다.
      • Radio : 여러 항목 중 한 가지만 선택 가능함
      • Checkbox : 여러 항목 중 복수로 선택 가능함
    • Radio나 Checkbox는 하나의 그룹으로 묶기위해 name 속성의 값을 동일하게 명시해야 한다.
    • checked 속성을 명시할 경우 기본적으로 체크되어 화면에 표시된다.

02-항목선택하기.html

<!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->

<head>
    <!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
    <meta charset="utf-8" />
    <!--IE의 호환성 보기 모드 금지-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 스마트 장치에서의 해상도 균일화 처리-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--브라우저에 표시될 문서 제목-->
    <title>My Web Page</title>
</head>
<!-- 브라우저에 보여질 부분 -->

<body>
    <form>
        <fieldset>
            <legend>취미 선택하기</legend>
            <div>
                <!--체크박스-->
                <input type="checkbox" name="hobby" id="hobby1" value="축구" checked />
                <label for="hobby1">축구</label>
                <input type="checkbox" name="hobby" id="hobby2" value="농구" />
                <label for="hobby2">농구</label>
                <input type="checkbox" name="hobby" id="hobby3" value="야구" />
                <label for="hobby3">야구</label>
            </div>
        </fieldset>
        <br />
        <fieldset>
            <legend>성별 선택하기</legend>
            <div>
                <!-- 라디오 버튼 -->
                <input type="radio" name="gender" id="gender_m" value="M" checked />
                <label for="gender_m">남자</label>
                <input type="radio" name="gender" id="gender_w" value="W" />
                <label for="gender_w">여자</label>
            </div>
        </fieldset>
    </form>
</body>

</html>

출력결과

#03. 입력양식 만들기

1) 드롭다운의 기본 형식

  • <select>태그로 드롭다운의 박스를 구성하고, <option>태그로 선택 항목을 구성한다.
    • multiple 속성이 지정된 경우 Ctrl이나 Shift키를 누른 상태에서 두 개 이상의 항목을 선택할 수 있게 된다.(잘 사용되지 않는 속성)
  • <option>태그
    • value 속성값: 해당 항목이 선택되었을 때 프로그램이 인식할 내용
    • selected 속성: 해당 <option>요소를 기본적으로 선택 상태에 있게 한다. 여러 개의 <option>요소가 이 속성을 갖고 있는 경우 맨 마지막 항목이 선택된 상태로 표시된다.
<labelfor="id값 연결">...내용...</label> 
<selectname="웹 프로그램 식별값"    id="고유 식별값"    [multiple]> 
    <option[value="선택시 값"][selected]>화면 표시 내용</option> ...option태그 반복 사용... </select>

03-드롭다운.html

<!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->

<head>
    <!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
    <meta charset="utf-8" />
    <!--IE의 호환성 보기 모드 금지-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 스마트 장치에서의 해상도 균일화 처리-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--브라우저에 표시될 문서 제목-->
    <title>My Web Page</title>
</head>
<!-- 브라우저에 보여질 부분 -->

<body>
    <form>
        <fieldset>
            <legend>이동통신사 선택하기</legend>
            <div>
                <!-- 드롭다운 (싱글타입) -->
                <label for="telecom">이동통신사 선택</label>
                <select name="telecom" id="telecom">
                    <option>----- 선택하세요 -----</option>
                    <option value="SKT">SKTelecom</option>
                    <option value="KT">KT</option>
                    <option value="U+">LG U+</option>
                </select>
            </div>
        </fieldset>
        <br />
        <fieldset>
            <legend>스마트폰 운영체제 선택하기</legend>
            <div>
                <!-- 드롭다운 (멀티타입) -->
                <label for="smartphone">스마트폰 운영체제</label>
                <select name="smartphone" id="smartphone" multiple>
                    <option value="android"> 안드로이드</option>
                    <option value="iOS">iOS</option>
                    <option value="window">Window</option>
                </select>
            </div>
        </fieldset>
    </form>
</body>

</html>

출력결과

#04. 파일 첨부하기

  • 파일 찾아보기 버튼 표시하기

    • type=“file” 요소는 웹 프로그램으로 파일을 전송할 수 있도록 찾아보기 버튼을 표시하며, 한 번에 하나의 파일만 첨부 가능하다.
    • 요소가 사용될 경우에는 반드시 <form>태그에 enctype=“multipart/form-data” 속성이 명시되어야 한다.
    • 브라우저의 보안을 위해 이 요소에서는 value 속성값을 지정할 수 없다.
    <formenctype="multipart/form-data"> 
    <inputname="이름(영어)"id="식별자(영어)"type="file"/> </form>

04-파일첨부하기.html

<!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->

<head>
    <!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
    <meta charset="utf-8" />
    <!--IE의 호환성 보기 모드 금지-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 스마트 장치에서의 해상도 균일화 처리-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--브라우저에 표시될 문서 제목-->
    <title>My Web Page</title>
</head>
<!-- 브라우저에 보여질 부분 -->

<body>
    <form enctype="multipart/form-data">
        <fieldset>
            <legend>파일첨부</legend>
            <div>
                <label for="photo">사진선택</label>
                <input type="file" name="photo" id="photo" />
            </div>
        </fieldset>
    </form>
</body>

</html>

출력결과

#05. 데이터 전송하기

  • 버튼 표시하기

    • type 속성에 따라 버튼의 특성이 변경된다.
      • submit -> <form> 영역 안에서 사용자가 입력한 내용들을 웹 프로그램에게 전송한다.
      • button -> 아무런 동작이 없다. 일반적으로 Javascript와 연결하여 특정 동작을 구현하기 위해 사용한다. (ex: 아이디 중복검사, 우편번호 찾기 등)
      • reset -> 사용자가 입력한 모든 내용을 삭제한다.
      • image -> 버튼에 이미지를 표시한다. 기본 특성은 submit과 동일한다.
    • type속성이 image인 경우 value 속성 대신 src속성이 사용된다.
    <input type="submit|button|reset|image" value="버튼 표시 텍스트" [src="이미지경로"]/>

  • 사용자의 입력값을 웹 프로그램으로 전송하기

    • <form>요소 내의 submit 버튼이 눌러지면 현재 <form> 안에 사용자가 입력한 모든 내용들이 action 속성에서 명시하는 웹 프로그램 페이지로 전송된다.
      • 이 웹 프로그램은 사용자의 입력값을 전달받아 입력, 수정, 삭제 등의 처리를 수행하게 된다. 이러한 처리는 ASP, JSP, PHP 등의 웹 프로그램으로 구현한다.
    • enctype 속성은 입력 양식 안에 파일 첨부 기능이 포함되어 있는 경우 반드시 지정해야 한다.
    • method 속성은 전송방식을 의미한다.
      • get: 입력된 모든 내용이 URL에 포함되어 전송된다.
      • post: 입력된 내용이 URL에 노출되지 않는다.
    <formmethod="post|get" action="웹프로그램 URL" [enctype="multipart/form-data"]> … 입력 내용 구성하기 … </form>

05-데이터전송.html

<!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->

<head>
    <!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
    <meta charset="utf-8" />
    <!--IE의 호환성 보기 모드 금지-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 스마트 장치에서의 해상도 균일화 처리-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--브라우저에 표시될 문서 제목-->
    <title>My Web Page</title>
</head>
<!-- 브라우저에 보여질 부분 -->

<body>
    <form name="form1" method="get" action="result.html">
        <fieldset>
            <legend>이름입력하기</legend>
            <div>
                <label for="user_name">이름: </label>
                <input type="text" name="user_name" id="user_name" />
            </div>
            <div>
                <input type="submit" value="입력완료" />
                <input type="reset" value="다시작성" />
                <input type="button" value="일반버튼" />
                <input type="image" src="img/ok.png" alt="입력완료" />
            </div>
        </fieldset>
    </form>
</body>

</html>

출력결과

#06. 새로운 입력 요소들

  • HTML5부터는 입력값의 형태에 따라 <input> 태그의 type속성에 부여할 수 있는 종류가 다양해 졌다.
  • type값에 따라 모바일 환경에서의 기본 키보드 형태가 변경된다.
type 값 설명
url 웹 페이지의 URL을 입력할 수 있다.
tel 전화번호를 입력할 수 있다.
number 숫자값을 입력할 수 있다. 최소값을 위한 min속성과 최대값을 위한 max속 성, 입력 단계 설정을 위한 step속성을 추가적으로 사용한다.
range 슬라이드 바 형태로 수치값을 선택할 수 있다. 최소값을 위한 min속성과 최 대값을 위한 max속성, 입력 단계 설정을 위한 step속성을 추가적으로 사 용한다.
date 날짜 형식의 값을 입력한다.
time 시간 형식의 값을 입력한다.
emial 이메일을 입력할 수 있다.
search 검색어를 입력하는 용도로 사용한다.
  • number 타입과 range 타입의 추가 속성
    • input type=“number”와 input type=“range”는 공통적으로 수치값을 입력하기 위한 컴포넌트이기 때문에, 수치값의 최대값, 최소값, 입력가능한 값의 단계에 대한 추가적인 속성들이 필요하다.
속성명 설명
max 컴포넌트에 입력 가능한 최대값을 숫자로 설정한다.
min 컴포넌트에 입력 가능한 최소값을 숫자로 설정한다.
step 컴포넌트에 입력 가능한 값의 단계를 숫자로 설정한다. 예를 들어 5라고 입력하면 inputtype="number"는 5의 배수만 입력가능하다. 또한 inputtype="range"는 슬라이드를 왼쪽이나 오른쪽으로 드래그 할 때 마다 5단위로 값이 변하게 된다.
  • <button> 태그
    • <inputtype=”submit|reset|button”/>을 대체하기 위한 새로운 태그.
    • 오직
      태그에만 지정할 수 있던 method,action속성을 개별적으로 지정할 수 있다.
    • 기존에는 하나 당 (버튼의 수에 상관 없이) 한 개의 웹 프로그램만 연동 가능했지만, 이제는 개별 버튼별로 연동을 지정할 수 있다.
속성 값 설명
type submit,button,reset 버튼의 종류를 지정한다.
formaction url 데이터를 전송할 파일을 지정한다.
formmethod get,post 전송 방식을 지정한다.
formtarget _blank,_self,_parent,_top form의 target속성을 덮어 쓴다.

06-html5-form.html

<!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->

<head>
    <!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
    <meta charset="utf-8" />
    <!--IE의 호환성 보기 모드 금지-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 스마트 장치에서의 해상도 균일화 처리-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--브라우저에 표시될 문서 제목-->
    <title>My Web Page</title>
</head>
<!-- 브라우저에 보여질 부분 -->

<body>
    <form name="form1">
        <h1>회원가입</h1>
        <fieldset>
            <legend> 부가 정보 </legend>
            <div>
                <label for="user_mail">이메일: </label>
                <input type="email" name="user_mail" id="user_mail" required="required" title="ex) student@gmail.com" />
            </div>
            <div>
                <label for="user_homepage">홈페이지: </label>
                <input type="url" name="user_homepage" id="user_homepage" />
            </div>
            <div>
                <label for="user_age">나이: </label>
                <input type="number" name="user_age" id="user_age" min="19" max="100" step="1" />
            </div>
            <div>
                <label for="user_phone">연락처</label>
                <input type="tel" name="user_phone" id="user_phone" />
            </div>
            <div>
                <label for="point">목표성취도(%): </label>
                <input type="range" name="point" id="point" value="50" min="0" max="100" />
            </div>
            <div>
                <label for="birthday">생년월일: </label>
                <input type="date" name="birthday" id="birthday" value="2014-11-30" />
            </div>
            <div>
                <label for="worktime">출근시간: </label>
                <input type="time" name="worktime" id="worktime" value="09:00" />
            </div>
            <div>
                <label for="friend">추처인 아이디:</label>
                <input type="search" name="friend" id="friend">
            </div>
            <div>
                <input type="submit" value="hello" />
                <button type="submit">hello</button>
            </div>
        </fieldset>
    </form>
</body>

</html>

출력결과

'코딩 공부 > HTML + CSS' 카테고리의 다른 글

[HTML+CSS] 08_CSS구체성단위  (0) 2020.05.09
[HTML+CSS] 07_CSS시작하기  (0) 2020.05.09
[HTML+CSS] 05_멀티미디어  (0) 2020.05.09
[HTML+CSS] 04_표만들기  (0) 2020.05.09
[HTML+CSS] 03_문장이나 단어를 강조하기  (0) 2020.05.09

'코딩 공부/HTML + CSS' Related Articles

티스토리툴바