HTML_VSC

08. form tag (폼 입력 양식 요소)

76beny 2022. 6. 10. 23:26
 

 

 

input tag

 - 사용자의 입력을 위한 다양한 type을 갖는 입력 필드를 생성

 

text type 속성

- 한줄짜리 입력창이 생기는 속성, 가장 기본적인 필드
- name : 서버에서 클라이언트의 요청 파라메터(데이터)로 인지 할 이름
- id : 클라이언트 페이지에서 태그를 인지할 id, 주로 javascript나 css 식별자로 사용됨

  이름 : <input type="text" name="name" id="name">
    <br> 전화번호 : <input type="tel" name="tel" id="tel" value="010-" size="13" maxlength="13"><br>

 

submit / reset type

- submit : 입력한 데이터를 서버 페이지로 전송하는 기능, 버튼 외에 javascript에서도 가능하다.
- reset : 입력한 데이터를 초기화 하는 기능, form단위로 리셋됨

    <form method="GET" action="06_link.html">
        아이디 : <input type="text" name="u_id">
        <br> 비밀번호 : <input type="text" name="u_pass">
        <br>
        <input type="submit" value="로그인">
        <input type="reset" value="다시입력">
    </form>

 

password type

 - 비밀번호 입력시 창에 ***으로 표시되고, 페이지가 벗어난 경우 자동으로 지워짐 (보완 강화!)

    <form method="GET" action="06_link.html">
        아이디 : <input type="text" name="u_id">
        <br> 비밀번호 : <input type="password" name="u_pass"><br>
        <input type="hidden" name="secretData" value="201720214">
        <input type="submit" value="로그인">
    </form>

 

hidden type

- 사용자에게 보여지지 않고 client 전달되었다가 다시 서버쪽으로 전달될수 있는 필드
- 주로 개발자 편의 요소로 활용되나 가끔 보안의 헛점이 될수 있음으로 주의 요구!

  <input type="hidden" name="secretData" value="201720214">

 

checkbox type

- name을 동일한 그룹으로 설정하고, 다중 선택이 가능한 속성
- 향후 서버 사이드에서 제일 다루기 귀찮은 속성 -> 다르게 설계하는 것을 추천

   <input type="checkbox" name="check1" value="java">자바
    <input type="checkbox" name="check1" value="oracle">오라클
    <input type="checkbox" name="check1" value="html" checked>HTML

 

radio type

- name을 동일한 그룹으로 설정하고, 단일 선택만 가능한 속성

    <input type="radio" name="check2" value="java">자바
    <input type="radio" name="check2" value="oracle">오라클
    <input type="radio" name="check2" value="html" checked>HTML

 

file type

 - 파일을 전송하기 위한 속성, 단일이나 다중 선택이 가능하다. -> 대부분 단일 처리를 추천

   <input type="file" name="upfile1" id="upfile1">
    <input type="file" name="upfile2" id="upfile2" multiple>

 

image type

- 사실상 이미지 버튼용도로 활용되는 기능

   <input type="image" src="resources/image/kh_logo.jpg" onclick="javascript:alert('hello!');">

* 이미지 누르면 창뜨고 hello출력

 

button type

- 버튼 기능으로 활용, submit나 onclick 이벤트를 받아 처리 가능

  <input type="button" value="확인" onclick="javascript:alert('hello!');">

 

type HTML5 양식 태그
- HTML5로 와서 적용된 태그로 IE나 올드한 version에서는 적용되지 않음
- HTML5의 표준을 잘 지키는 크롬계열의 브라우저(크롬, 웨일, 사파리, 엣지)에서는 사용 가능

 

 

date type

- 년,월,일 선택 가능한 양식 제공 

  <input type="date" name="date1"><br>
    <input type="date" name="date2" min="2022-01-01" max="2022-12-30" value="2022-06-20"><br>

 

datetime-local type 속성

-년,월,일,시간 선택 가능한 양식 제공

 <input type="month" name="date4"><br>

 

month type 속성

-년,월 선택 가능한 양식 제공

 <input type="month" name="date4"><br>

 

week type 속성

주 선택 가능한 양식 제공

 <input type="week" name="date5"><br>

 

time type 속성

시간 선택 가능한 양식 제공

  <input type="time" name="date6"><br>

 

 

color type 속성

    <input type="color" name="color1">
    <input type="color" name="color2" value="#ff0000">

 

 

 

number type 속성

- 숫자 입력 양식

  <input type="number" name="num" min="0" max="150">

 

range type 속성

- 슬라이드 막대로 숫자 지정 양식

  <input type="range" name="range" min="0" max="150">

 

search type 속성

- 검색어 입력 양식(입력 후 x버튼 생김)

  <input type="search" name="search">

 

email type 속성

- 데이터 전송 시 @를 확인하는 입력 양식

    <form action="#">
        <input type="email" name="mail">
        <input type="submit" value="전송">
    </form>

 

url type 속성

-  데이터 전송 시 주소인지(http://)를 확인하는 입력 양식

    <form action="#">
        <input type="url" name="url">
        <input type="submit" value="전송">
    </form>

 

placeholder 속성

- 사용자의 입력창에 hint(뒤에 회색 글씨)로 표시하는 기능

<input type="text" placeholder="아이디를 입력하세요.">

 

readonly 속성

 - 읽기전용으로 사용자가 값을 변경할 수 없음

   <input type="text" value="변경 불가한 값" readonly>

* 아예 입력이 안됨!

 

required 속성

- submit시 필수 입력값으로 지정하여 브라우저에서 체크하는 항목

 <form action="#">
        아이디 : <input type="text" name="u_id" required>
        <br> 비밀번호 : <input type="password" name="u_pass" required>
        <input type="submit" value="로그인">
    </form>

로그인 누르면 주소창 바뀜!

 

label 태그

- 입력 값이 무엇인지 설명하고, click 시 id와 매칭하는 기능

   <label for="id">아이디 : </label> <input type="text" name="id" id="id">
    <label for="pw">비번 : </label> <input type="password" name="pw" id="pw">

 

<여러값을 표현하는 태그>
select 태그
- 드롭다운으로 목록을 선택하도록 유도하는 태그


option 태그
 - select 태그에 종속되어 옵션을 값을 지정해주는 태그


optgroup 태그
 - option값을 그룹할때 사용하는 태그로 선택되지 않음!

 

1. 기본적인 select 활용

    <select name="lang" id="lang">
        <option value="java">자바</option>
        <option value="sql">SQL</option>
        <option value="html" selected>HTML</option>
    </select>

 

2. size를 활용하여 화면에 보여줄 항목의 개수를 지정

    <select name="lang" id="lang" size="2">
        <option value="java">자바</option>
        <option value="sql">SQL</option>
        <option value="html" selected>HTML</option>
    </select>

*2개만 표시되고 스크롤 내리면 HTML있음!

 

3. multiple : 여러 항목을 지정 가능한 옵션

- ctrl을 누른채 활용해야함 -> 어렵다..

    <select name="lang" id="lang" size="2" multiple>
        <option value="java">자바</option>
        <option value="sql">SQL</option>
        <option value="html" selected>HTML</option>
    </select>

*ctrl 누르면서 클릭하면 여러개 선택 가능!

 

4. optgroup을 활용하여 그룹핑하는 방법

    <select name="lang" id="lang">
        <optgroup label="Backend">
            <option value="java">자바</option>
            <option value="sql">SQL</option>
            <option value="spring">스프링</option>
        </optgroup>
        <optgroup label="Frontend">
            <option value="html" selected>HTML</option>
            <option value="css" selected>css</option>
            <option value="javascript" selected>javascript</option>
        </optgroup>
    </select>

 

datalist 태그

- input 태그의 리스트 형식을 제공하여 옵션을 자동을 입력하는 기능 (절대적이지 않음!!)

    <input type="text" name="dlist2" list="dlist1">
    <datalist id="dlist1">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="js">자바스크립트</option>
    </datalist>

 

 

textarea 태그

 - 여러줄을 입력받을때 사용하는 태그, 

cols:줄의 길이, 

rows : 행의 길이를 표기 해야함

- 태그 시작과 끝 사이 공간이 실제 컨텐츠가 됨으로 공백 유지 필수!

    <textarea name="" id="" cols="30" rows="10">
        내용이 들어가는 공감으로 newline이나 ' '공백, \t이 다 먹히는 곳
    </textarea>

*작성할때 내용을 지워야함!

 

prograss 태그

- 작업 진행 상태를 나타내는 태그

  <progress max="100" value="45"></progress>

 

meter 태그

- 값이 차지하는 크기(게이지) 표시 ex) 디스크 사용량 등...

    <meter min="0" max="10" value="5"></meter>
    <meter min="0" max="10" low="3" high="7" value="5"></meter>
    <meter min="0" max="10" low="3" high="7" value="1"></meter>
    <meter min="0" max="10" low="3" high="7" value="8"></meter>

 

button 태그

 - summit Type 대신 사용되는 태그, css 활용하기 좋음으로 자주 사용됨

    <form action="#">
        <input type="text" name="u_id" placeholder="아이디">
        <input type="password" name="u_pass" placeholder="비밀번호">
        <button type="submit">로그인</button>
    </form>

 

"본 인터넷 사이트 내의 모든 이미지, 문구, 콘텐츠, 내용 등에 대한 저작권은 76beny에게 있습니다.

이를 무단으로 도용, 복사, 전재, 재배포, 2차 변형 등을 할 경우

민, 형사상 법적 조치 등 저작권법에 의거하여 처벌 받을 수 있습니다."