20.03.23(Mon) 폼 관련 태그들

.·2020년 3월 23일

HTML&CSS

목록 보기

2/7

1. 폼 만들기

form 태그에 오는 속성으로는 target, method, name, action (이게 기억안나네 액션..) 이 있다.
<form 속성="값"></form>
<form name="whattoeat2day" action="morning.php" method="POST"></form>

action : 폼의 정보들을 어디로 보내겠다. 어떤 서버 프로그램에 보내 이걸 처리하게 할까. 뭐 그런 느낌. 프로그램으로는 php나 asp jsp 등등..
method : 메소드 속성의 값은 2종류이다. 하나는 p..(아 기억이..) post,, GET 과 POST 이다. 겟은 서버로 넘길 수 있는 데이터가 한정적이며 무엇보다 주소창에 사용자가 입력한 내용이 뜬다. 일반적인 검색창이면(구글 검색창) 뭐 겟을 쓰고 검색창에 뜬들 뭐 어떠하리?
post : 포스트는 입력 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 드러나지 않는다. 로그인 창에 적용하면 될 듯. 네임의 경우는 하나의 문서에 폼이 여러 개 일 경우 폼들을 구분하기 위해 사용한다. 타겟은 뭐 모르겠다. 제끼고.

폼의 속성 중에 autocomplete 속성이 있는데 이게 평소 디폴트값으로 "on" 으로 되어 있다. 이게 뭐냐면 인풋 텍스트박스 에 뭐 넣고 이거넣고 하다 보면 그동안 써 넣었던 것들이 그대로 나오는 "자동완성" 기능을 한다.

그러니까 사이트 로그인 하려고 보면 여러 계정 아이디가 자동완성 으로 뜬다.

그런데,

 <form autocomplete="off"......................></form>

이렇게 해 버리면 뭘 아무리 써도 자동완성 된 게 없어서 안보인다.

2. label 태그 : 폼 요소에 라벨 붙이기

(쓰는 방법이 두 가지가 있는데 두번째 방법을 선호)

1) 첫번째 - 인풋타입 요소를 오픈라벨태그 바로 뒤에 붙이면 붙는 순서가 바뀐다. 그러면 요소 다음에 나오는 거는 라벨을 감싸고 있는 컨텐츠, 즉 "아이디" 가 이어서 나오겠지. 원하는 대로 입맛에 맞게 넣기를..

	<label>아이디<input type="text" name="id"></label>

2) 두번째 - 이거도 아이디 : 텍스트 박스 이렇게 보여지지만 난 이 방법이 좋다.
위에는 약간 정제되지 않은 듯한 느낌임. ?!

	<label for="user-id">아이디</label>
	<input type="text" id="user-id" name="id">

3. 폼 요소 그룹으로 묶기

fieldset (그룹으로 묶어주긔) 과 legend (폼의 요소 제목을 지정)

		<fieldset>
          <legend>개인 정보</legend>
          <ul>
            <li>
              <label for="uname" class="title">이름</label>
              <input
                type="text"
                id="uname"
                placeholder="여백없이 입력"
                required
                autofocus
              />
            </li>
            <li>
              <label for="tel1" class="title">연락처</label>
              <input
                type="tel"
                id="tel1"
                placeholder="연락가능한 번호"
                required
              />
            </li>
          </ul>
        </fieldset>

폼 별로 묶어주는 역할을 하는 필드셋. 이 폼은 개인정보를 위한 폼, 저거는 로그인 정보 폼 해가지고 각각 목적별로 만든 폼끼리 그룹화 하는 것, 이렇게 필드셋으로 묶어버리면 자동으로 선이 생겨서 시각적으로 화면상에 그룹화 되어 보인다. 선 생기는거 맘에 안들면 스타일(or css)에서 border-style: none; 하면 선이 없어진다.

그리고 레전드는 우리가 아는 리그오브.. 아니고 필드셋으로 묶은게 뭘 얘기하는건데? 라고 할 때 묶은 것에 대한 제목을 붙여주는 역할을 하는 태그이다. 즉 legend 개인 정보 legend 에서 이 필드셋 그룹의 제목은 "개인 정보" 인 것이다.

4. 사용자 입력을 위한 input 태그 : 폼에서 사용자 입력을 받기 위해 사용하는 태그.

id 속성을 사용하는 이유는 폼을 만들 때 같은 폼 요소가 여러 번 반복되니까 여러번 사용된 폼 요소를 구분해 각각 다른 스타일 CSS를 적용하는데 도움을 주는 속성이다.
<input type="text" name="속성값" size="20" value="입력하세요">

어떤 타입을 쓰던, 반드시 name= 네임은 반드시 붙이는 습관'을 들여라. name은 필드를 구별할 수 있게 해준다.

이렇게 작성해서 제출 버튼을 눌러 서버로 전송하면, 서버에서는 아항~ 000 이름을 가진 입력 타입에 만들어진 텍스트 필드 내 입력된 값이 ●●●● 이래. 다른 타입들이랑 헷갈리지 않게 처리해서 보여줘~ 뭐 이런 식일까? name !! 뭐가 됫건 꼭 입력하는 버릇 들이기!

5. input 태그의 type 속성에서 사용 가능한 유형 : 매우 다양함

<input type="hidden" name="이름" id=" " value="서버로 넘길 값">
= 화면상의 폼에는 보이지 않지만 폼을 서버로 전송할 때 함게 전송되는 요소. 사용자는 안봐도 되지만 관리자는 봐야 하는 히든 필드.

<input type="text" name="이름" id=" " size="텍스트 필드의 길이를 지정" value="필드에 표시되는 내용, placeholder가 나을 듯">
= 한 줄 짜리 일반 텍스트를 입력하는 필드. 추가로 속성 중에 minlength, maxlength (최소, 최대 문자 개수) 도 지정할 수 있다.

<input type="password" name="userpw" id=" " size=" " minlength=" " maxlength=" ">
= 비밀번호 필드는 텍스트 필드와 유사하다. 단 텍스트 필드에 가능한 value 속성이 없다는 점만 제외하면.

<input type="search" name=" "> 아직 pc랑 모바일이랑 연동이 잘 안된다는데??
= 검색 상자 필드를 만들어 준다. 텍스트 필드랑 외관 상 별 차이가 없어 보이는데 필드 오른쪽에 x 표시 누르면 입력한거 지울 수 있다.

<input type="url" name="teddblogurl" id=" ">
= http https 로 시작되는 사이트 주소를 입력해야 함, 입력 필드에 엉뚱한 거 입력하면 경고 메세지가 뜰 것임.

<input type="tel" name="mobilenum" id=" ">
= 전화번호 입력란, 전화번호 입력란 만들어? 어? 번호? number 입력해? 이건 전혀 다른거임.. 주의!

<input type="email" name=" " id=" ">
= 이메일 필드 입력란. 여기도 내맘대로 암거나 갖다 쓰면 @골뱅이 안넣냐 하면서 경고 문구가 뜬다. 

<input type="number" name=" " id=" " min="1" max="5" value="화면에 보여지는 초기 지정값(숫자)"> 개
= 숫자 입력인데 필드 오른쪽에 스핀 박스가 표시되어서 숫자를 증감시키게 할 수 있다. 주문 개수나 뭐 그런데 사용 가능

<input type="range" name=" " id=" " min="0" max="100" value="초기 지정값(숫자)" step="숫자간격지정(기본값1)">
= 슬라이드 바로 숫자 지정이 가능한 필드

<input type="radio" name=" " value=" " id=" ">
= 라디오 버튼. 여러 항목 중 원하는 단 하나의 항목을 선택할 때 사용. 어떤 한 그룹에 해당하는 여러 항목들에 라디오 버튼을 주려고 할 때,
name 값은 모두 동일해야 같은 범주 내에서 단 하나의 항목만을 선택 할 수 있다.(같은 그룹끼리는 같은 name)

<input type="checkbox" name=" " value=" " id=" ">
= 체크박스. 두가지 이상의 항목을 선택할 때 사용. 체크박스는 여러 항목들의 name="값" 을 모두 다르게 적용한다. 복수 선택이라 하더라도
사용자가 어떤 거를 고를 지 모르기 때문에.(근데 코드카데미 여기서는 값을 똑같이 주던데?.. 뭘 어떻게 해도 복수선택이 가능하기는 했다)

<input type="submit" name=" " value="제출" id=" "> = 서버로 제출 버튼. type="image"도 같은 역할.
<input type="reset" name=" " value="초기화" id=" "> = 리셋 버튼
<input type="button" name=" " value="버튼" id=" "> = 아무의미 없는 버튼

<button type="submit">제출</button> 이렇게 입력하면 위의 방식과 차이점은 화면 낭독기를 통해 의미 전달이 확실히 된다.

6. input 태그의 다양한 속성

autofocus : 원하는 폼의 입력 요소 중에 지정해 놓으면 키보드 커서가 깜빡 거리며 여기다 쳐라 인마 하고 알려주는 역할
placeholder : 폼의 입력 요소에 placeholder="띄워쓰기하지말고붙여쓰세요" 이렇게 해놓으면 약간 흐리게 요소에 표시가 되는데 실제로 입력하면 사라지게 되니 안심. 약간 뭐랄까 이 폼에다가 뭘 어떻게 쓸지 알려주는 힌트가 된다고나 할까?
readonly : 사용자는 읽을 수만 있고 편집을 못함. 입력을 못하게 함.

<textarea id="" name="" readonly......></textarea>

required : 리콰이어드 써놓고 실제 페이지에 입력 안하면 경고창 뜬다. 필드에 반드시 입력해야 함

size, minlength, maxlength : 사이즈는 필드 자체의 크기, 민맥스렝스는 필드에 적을 수 있는 최대글자 최소글자 를 뜻함. width, height 를 같이 설정해야 적용 되는 거로 알고 있다. 브라우저 사이즈가 늘어남과 줄어듬에 쭈그러들지 않게 해준다. 반응형 웹 같은 건가? 훔..

7. 여러 데이터 나열해 보여주기

select와 option 태그 : 서로 붙어다니는 태그임.(부모자식) 드롭다운 목록 그거 만드는 거.

<label for="burger-type">CHOOSE YOUR BURGER:</label>
        <select id="burger-type" name="burger-type" required>
          <option value="cheeseburger">CHEESEBURGER</option>
          <option value="hamburger">HAMBURGER</option>
          <option value="shanghaibicmac">SHANGHAIBIGMAC</option>
        </select>

이렇게 만들어 놓고 확인해 보니 목록을 더 구별해 놔야겠어 할 때 쓰는게 < optgroup >

햄버거를 예로 들면 정통 버거 타입 이 있으면 세계의 김치버거, 상하이버거 등등 파생 상품 버거 타입도 있을테니까.. 셀렉트 태그의 속성은 size(화면에 표시될 드롭다운메뉴의 항목개수 지정) 와 multiple (드롭다운 항목 보일때 커맨드 누르면 복수 선택가능)
이렇게 두 가지 있는데 속성 둘 다 안쓰거나 또는 하나만 쓰든가 이렇게 해야 한다. 즉 속성에 size, multiple 둘 다 한방에 쓰지 말라거..

옵션 태그의 속성은 value(서버로 넘겨질 값 지정), selected(드롭다운 표시될때 처음 기본으로 선택되어 있는 옵션 지정) 두가지 있다.

옵션과 옵션 사이에는 실제 화면에 보여지는 텍스트를 입력한다.

데이터리스트 datalist 와 옵션 option 태그
클릭하면 목록이 싹 다 나옴. 항목이 생각보다 많을 때. 텍스트 필드와 함께 사용. 필드에 ket 치려하면 ketchup 하고 자동완성 처럼 보여 나타나지는 것.

<label> 과 <input> 은 for 과 id 로 연결하지만  인풋과 데이타리스트는 인풋의 속성 list 와 데이타리스트의 속성 id 로 서로 연결시킨다.

<option></option> 사이에는 아무것도 입력하지 않는다.

<option> 의 두가지 속성 : value(서버로 넘겨질 값), label(브라우저에 표시할 레이블,  지정따로 안하면 벨류값을 레이블로 사용함)

<section class="sauce-selection">
          <label for="sauce">What type of sauce would you like?</label>
          <input list="sauces" id="sauce" name="sauce">
          <datalist id="sauces">
            <option value="ketchup"></option>
            <option value="mayo"></option>
            <option value="mustard"></option>
          </datalist>
        </section>

8.< textarea > 태그 : 여러 줄 입력하는 텍스트 영역 만들기 (하단 참조)

<textarea id="extra" name="extra" rows="3" cols="40"></textarea>