7_[html]양식 관련 태그 모음

4 minute read

양식 관련 태그 모음

form 태그 <form>
- 웹 서버에 정보를 제출하기 위한 양식 범위를 정의
- form 태그의 속성

form{display:block;}

form 태그는 중첩시켜서 사용할 수 없음
POST 방식으로 전달된 데이터는 개발자도구-Network-Form Data 에서 확인 가능

⚠️ 아이디, 비밀번호는 암호화하여 전송해야 안전!

사용자에게 입력받을 데이터 양식

input 태그의 속성

type 속성의 값

input 태그의 form 속성 사용 예시

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input</title>
</head>

<body>
    <form action="/login" id="form1">
        
    </form>
    **<input type="text" form="form1" autofocus>**
</body>

</html>

텍스트 타입이나 비밀번호, 이메일은 쉽게 확인할 수 있으니 몇가지 양식만 짚고 넘어가자

a. 체크박스

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="/number">
        <input type="number" step="4" placeholder="숫자를 입력하세요!">
        <label for="김밥">김밥</label>
        <input type="checkbox"name="item"id="김밥" value="김밥">
        <label for="떡볶이">떡볶이</label>
        <input type="checkbox"name="item"id="떡볶이"value="떡볶이">
        <input type="submit" value="제출">
    </form>
</body>

</html>

위와 같이, name으로 체크박스로 서버에 넘길 데이터 필드의 값을 묶고, 각 input 태그 값을 value로 설정해주면 위와 같이 name값=value값으로 전달됨!
여러 item 선택 가능!

b. file 타입- 파일을 열기

<label for="file">파일 선택</label>
<input type="file"name="file"value="file"multiple>

input 태그의 속성값이 file이면, 파일을 컴퓨터 내에서 선택할 수 있는데,

위와 같이 multiple 속성을 넣어주면, 여러개의 파일을 선택할 수 있다!

그때 생성되는 url을 잘 살펴보면 name 속성값으로 설정해두었던 file에 대해서 file=파일명&file=파일명&…으로 연결되어 나타남을 알 수 있다!

c. image 타입의 입력양식

<input type="image" src="./heropy.png"alt="heropy">

위와 같이 작성하게 되면, 마치 img 태그로 이미지를 삽입한 것과 같은 효과를 볼 수 있다!

여기서 그치지 않고, 이를 이용해서 제출 버튼으로써 사용할 수 있음!

-이미지를 누르면 form 태그에서 명시해두었던 action 값의 페이지 url로 이동됨!

d. radio버튼

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RadioBox</title>
</head>
<body>
    <form action="/food">
        <label for="hamburger">햄버거</label>
        <input type="radio" name="food" value="hamburger">
        <label for="gimbap">김밥</label>
        <input type="radio" name="food" value="gimbap">
        <label for="tteokbokki">떡볶이</label>
        <input type="radio" name="food" value="tteokbokki">
        <input type="submit"value="제출">
    </form>
</body>
</html>

radio 버튼도 체크박스처럼 name 속성으로 그룹화하여 선택하는 item의 필드를 묶어준다
선택은 단 하나!
체크박스와 다르게 클릭했던 아이템을 재클릭해도 체크가 풀리지 않음!

라벨 가능 요소(labelable)의 제목(caption)
for 속성과 input 태그의 id 속성 값을 맞추어 줌으로써 , 라벨을 선택해도 해당 input을 누른 것처럼 버튼처럼 사용 가능

↔️ 이는 input 태그를 label 태그로 둘러싼 경우와 기능적으로 동일하게 작동함!

<!-- 라벨 가능 요소를 참조 -->
<input type=**"checkbox**" **id="user-agreement"** />
<label **for="user-agreement"**>동의하십니까?</label>

<!-- 라벨 가능 요소를 포함 -->
<label><input type="checkbox" />동의하십니까?</label>

for 속성: 참조할 라벨 가능 요소의 id 속성값을 의미 ➡️ 라벨 가능 요소를 참조 or 컨텐츠로 label을 포함시킴

선택 가능한 버튼을 지정

button 태그의 속성

button{display:inline-block;}

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="reset" value="초기화">
    <button type="reset">초기화</button>
    <!--일반버튼은 어떤 기능을 하지 않아서 
js코드를 붙여주어야 함!-->
    <button type="button" onclick="doIt();">버튼</button>
    <button type="submit">제출</button>
    <script>
        function doIt() {
            alert('클릭했어용');
        }
    </script>
</body>

</html>

여러 줄의 일반 텍스트 양식

textarea 태그의 속성

textarea는 크기 조절이 가능하지만, 새로고침을 하면 원래 크기로 돌아감

fieldset : 같은 목적의 양식을 그룹화
legend : 같은 목적의 양식에 대한 제목을 지정

fieldset, legend{display:block;}

(예시) 여러 데이터 중 하나를 택1하는 라디오버튼의 경우, name으로 그룹화하는데, “그룹화”한다는 점에서 fieldset과 legend 필요성 존재

<form>
  <fieldset>
    <legend>Coffee Size</legend>
    <label>
        <input type="radio" name="size" value="tall" />
        Tall
    </label>
    <label>
        <input type="radio" name="size" value="grande" />
        Grande
    </label>
    <label>
        <input type="radio" name="size" value="venti" />
        Venti
    </label>
  </fieldset>
</form>

fieldset 속성

fieldset 속성

옵션 : option, optgroup 드롭다운 메뉴 : select

-select : 드롭다운 메뉴를 만들 때 사용됨

-optgroup: 드롭다운 메뉴를 눌렀을 때, 나오는 메뉴의 “대분류” -option : optgroup이 존재한다면, optgroup 내에 소속되어 있는 “소분류” -select 나 datalist, 즉, 선택 메뉴나 자동 완성에서 사용될 옵션!

자동완성 : datalist

아래는 Heropy님 수업에 올라온 예제이다!

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Options</title>
</head>
<body>
    <select>
        <optgroup label="Coffee">
          <option>Americano</option>
          <option>Caffe Mocha</option>
          <option label="Cappuccino" value="Cappuccino"></option>
        </optgroup>
        <optgroup label="Latte" disabled>
          <option>Caffe Latte</option>
          <option>Vanilla Latte</option>
        </optgroup>
        <optgroup label="Smoothie">
          <option>Plain</option>
          <option>Strawberry</option>
          <option>Banana</option>
          <option>Mango</option>
        </optgroup>
      </select>
</body>
</html>

위의 예제를 확인해보면, Coffee, Capuccino, Latte, Smoothie의 대분류 안에 아메리카노, 카페모카 등이 들어가 있고,

Latte 대분류는 disabled(Boolean value)로 인해서 접근이 막혀있는

드롭다운 메뉴가 보인다!

select, optgroup, option 태그를 이용한 드롭다운메뉴

select 속성

optgroup 속성

option 속성

예제 하나를 더 살펴보자!

이번에는 Boolean 값을 이용하는 multiple 속성을 이용해서 다중 선택을 지원해보고,

size 속성을 이용해서 한 화면에 여러 옵션을 띄워주는 콤보박스인 리스트박스를 생각해보자!

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Options</title>
</head>
<body>
    <select size="8" multiple>
        <optgroup label="Coffee">
          <option>Americano</option>
          <option>Caffe Mocha</option>
          <option label="Cappuccino" value="Cappuccino"></option>
        </optgroup>
        <optgroup label="Latte" disabled>
          <option>Caffe Latte</option>
          <option>Vanilla Latte</option>
        </optgroup>
        <optgroup label="Smoothie">
          <option>Plain</option>
          <option>Strawberry</option>
          <option>Banana</option>
          <option>Mango</option>
        </optgroup>
      </select>
</body>
</html>

위의 결과를 통해서 한 화면에 8 개의 아이템이 보이고, 다중 선택이 가능함을 확인해 볼 수 있다!(ctrl 키: 비연속/연속적으로 선택 가능, ctrl+shift키 : 연속적으로 값 선택 가능)

빈 태그()으로 선택적으로 사용 가능 ➡️ 이 경우에는, label 속성과 value 속성이 필수!(닫히는 태그가 없어서 그 사이 컨텐츠의 유효성이 떨어짐) ▶️ 따라서! 열리고 닫히는 형식의 태그로 사용하는 것이 보다 나음!

datalist

datalist는 option 태그를 이용해서 자동완성 컨텐츠를 저장해두고!
id 값을 지정해둔 후,
input 태그의 list 속성에 datalist id값을 값으로써 전달해주면
해당 input 태그에서는 datalist의 컨텐츠를 자동완성으로써 사용할 수 있음!

datalist 태그

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자동완성</title>
</head>

<body>
    <input type="text" list="fruits">

    <datalist id="fruits">
        <option>Apple</option>
        <option>Orange</option>
        <option>Banana</option>
        <option>Mango</option>
        <option>Fineapple</option>
    </datalist>
</body>

</html>

Twitter Facebook LinkedIn

J. S. Jeong

7_[html]양식 관련 태그 모음

양식 관련 태그 모음

datalist

You May Also Enjoy

1_[spring]rest api 구축에 힘을 실어주는 hateoas

2_[spring jpa]m to n 연관관계 중간 테이블을 엔티티로 관리하는 경우

1_[spring jpa]m to n 연관관계 중간 테이블을 엔티티로 관리하지 않는 경우

2_[spring]websockethandler를 이용한 웹소켓 서버 구현