2023/03/09__HTML/CSS__6

** 입력 양식(Web Form)**

사용자가 페이지에 값을 전달하는 모든 형식

 

** form **

1. 모든 양식은 <form> ~ </form>안에서 작성

2. 모든 양식은 이름(name 과 id) 입력

 <form name="" action="데이터가 전송될 페이지" method="(데이터를 전달하는 방식) get 혹은 post">
 	<input type="종류" name="" id="" />
 </form>

3. 대부분의 양식은 <input> 태그의 "type" 속성으로 정의

 

<input 
tpye="속성"
name="" id="" 
size="한칸에 몇글자를 보이게 할건지 (칸의 길이가 바뀜 css대체)"
maxlength="숫자입력 (입력 된 수만큼 글자수 입력)"
minlength-"숫자입력 (입련 된 수보다 적게 입력 시 제한)"
value="input의 값"
placeholder="해당 input의 안내글 같은 개념"
readonly - 읽기전용 on/off(따로값은없음)
disabled - 비활성화 on/off(따로값은없음)
/>

<!-- type 속성
1 text
2 password

3 chechbox
- 다중선택가능 / value의 값으로 데이터로 보낼수 있음 / checked를 사용해 체킹을 미리 할수 있음
4 radio
- name이 같은 것 중에 하나 택 1 선택 / value의 값으로 데이터로 보낼수 있음 / checked를 사용해 체킹을 미리 할수 있음

5 image
- 하는 일은 submit과 동일 / submit 버튼에 이미지가 들어감 / src와 alt작성란이 있다. 요즘에는 잘안쓰임.
6 file
- 전송은 따로 구현
/ accept="파일종류/확장자 (ex)image/* image/jpg,image/png, video/mp4, video/webm)"
/ multiple - 파일을 여러개 선택가능

7 hidden - 용자에게는 보이지 않는 숨겨진 입력 필드를 정의

8 button - value를 사용해 버튼의 글자를 바꿈
9 submit - value를 사용해 버튼의 글자를 바꿈 / 전송을 하면 form의 action으로 보내준다.
10 reset - value를 사용해 버튼의 글자를 바꿈 / 원래 처음 있던 값으로 돌아감-->

 

text

< br/> password


checkbox


radio


image


file


hidden


button


submit


reset

get : 데이터를 가져오는 방식 - 빠르다

post : 데이터를 감춰서 가져오는 방식 - get 보다 느리다 ex) login, join, payment

 

- CRUD - 

Create - insert

Read - select

Upload - update

Delete - delete

Input Result	1 ↔️	processing	2 , 3 ↔️	Data Base
	4 ↖️↘️	↕️
Front end		Result		Back end

4. <select> : 콤보 상자 작성

<select
name="" 
id=""
size="숫자 = 숫자만큼 항목이 보임"
multiple(다중선택)
/>
	<option value="1"> 1 </option>
    <option value="2" selected> 2 </option>
</select>
<!-- ////////////////////////////// -->
<select>
   <optgroup label="group1">
    	<option value="3"> 3 </option>
        <option value="4"> 4 </option>
        <option value="5"> 5 </option>
        <option value="6"> 6 </option>
    </optgroup>
    
    <optgroup label="group2">
    	<option value="7"> 7 </option>
        <option value="8"> 8 </option>
        <option value="9"> 9 </option>
        <option value="10"> 10 </option>
    </optgroup>
</select>

1 2 3 4 5
3 4 5 6 7 8 9 10

 

5. <textarea> : 텍스트를 여러 줄 입력하는 상자

<p>
textarea
<textarea name="" id="" cols="숫자" rows="숫자">"textarea 는 value값을 안쓰고 여기다 기입 enter와 space가 결과에 반영된다."</textarea>
</P>

<!-- 약관 같은 것은 여기에 기입하면 안된다. -->

textarea
"textarea 는 value값을 안쓰고 여기다 기입 enter와 space가 결과에 반영된다."

6. <button> : 버튼 형식의 요소 작성(input 대신 button 사용)

<button type=""> TEXT </button>
<!-- type : button / submit / reset -->

7. 추가된 파일 속성값

- datetime
<input type="datetime"/>
<input type="datetime-local">

- week
<input type="week"/>

- month
<input type="month"/>

- date
<input type="date"/>

- time
<input type="time"/>

- email
<input type="email"/>

- url
<input type="url"/>

- search
<input type="search"/>

- number
<input type="number" min="1" max="30"/>

- range
<input type="range" min="0" max="10" step="2" value="5"/>

- tel
<input type="tel"/>

추가된 type 속성값

datetime

datetime-local

date

week

month

time

email

url

search

number

range

tel

 

* input Element의 새로운 Attribute

 

1. placeholder

<input type="text" placeholder="값"/>

2. autofocus

<input type="text" autofocus/>

3. required

- 필수 입력 항목 지정

- title 속성을 이요하여 추가 메세지 지정 가능

- mobile 일부 구현

<input type="text" title="값" required/>

추가된 type 속성값

placeholder

autofocus

required

* 표준 & 접근성 향상

1. fieldset : 양식의 소그룹 

- 의미적으로 묶어주기 위해 사용 / 디자인적 구분은 div를 사용

2. legend : fieldset의 제목

3. label : 필드와 텍스트의 그룹

4. for(속성): 연결하고자 하는 필드의 id값 작성

<form action="" method="">
      <fieldset>
        <legend>로그인 정보</legend>
        <p>
          <label for="uid">아이디</label>
          <input name="uid" id="uid" type="text" />
        </p>
        <p>
          <label for="pwd"> 비밀번호 </label>
          <input name="pwd" id="pwd" type="password" />
        </p>
      </fieldset>

      <fieldset>
        <legend>연락처 정보</legend>
        <p>
          <label>
            이메일
            <input name="email" id="email" type="text" />
          </label>
        </p>
        <p>
          <label>
            전화번호
            <input name="mobile" id="mobile" type="text" />
          </label>
        </p>
      </fieldset>
    </form>

로그인 정보

아이디

비밀번호

연락처 정보

이메일

전화번호

 

SIMPLE Log In Form

<!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>
    <style>
      fieldset {
        border: 1px solid tomato;
      }
      label,
      input {
        margin: 5px 20px;
      }
      div > input {
        border-radius: 20px;
        padding: 5px 0px;
        padding-left: 15px;
      }
      fieldset > input:last-child {
        border-radius: 25px;
        padding: 5px 10px;
        background-color: cornflowerblue;
        border: none;
      }
    </style>
  </head>
  <body>
    <form action="" method="">
      <h2>JOIN</h2>
      <fieldset>
        <legend>USER INFO</legend>
        <div>
          <label for="name">Name</label>
          <input type="text" name="" id="name" placeholder="NAME" required />
        </div>

        <div>
          <label for="id">ID</label>
          <input type="text" name="id" id="id" placeholder="ID" required />
        </div>

        <div>
          <label for="confirm_id">Checking ID</label>
          <input
            type="text"
            name="id"
            id="confirm_id"
            placeholder="Check ID"
            required
          />
        </div>

        <div>
          <label for="pwd">Password</label>
          <input
            type="password"
            name="pwd"
            id="pwd"
            placeholder="Password"
            required
          />
        </div>

        <div>
          <label for="check_pwd">Password</label>
          <input
            type="password"
            name="pwd"
            id="check_pwd"
            placeholder="Chech Password"
            required
          />
        </div>

        <div>
          <label for="gender">Click your Gender</label>
          <input type="radio" name="gender" id="gender" /> <span>Man</span>
          <input type="radio" name="gender" id="gender" /> <span>Woman</span>
        </div>

        <div>
          <label for="phone">phone</label>
          <input
            type="tel"
            name="phone"
            id="phone"
            placeholder="Phone number"
            required
          />
        </div>

        <div>
          <label for="location">Location</label>
          <input
            type="text"
            name="location"
            id="location"
            placeholder="Where you at?"
            required
          />
        </div>

        <div>
          <label for="email">E - Mail</label>
          <input
            type="email"
            name="email"
            id="email"
            placeholder="E-Mail"
            required
          />
        </div>

        <div>
          <label for="birthday">Birthday</label>
          <input type="date" name="birthday" id="birthday" />
        </div>

        <div>
          <label for="agree">Agreement</label>
          <input type="radio" name="agree" id="agree" /> <span>Agree</span>
          <input type="radio" name="agree" id="agree" /> <span>Disagree</span>
        </div>

        <input type="submit" value="JOIN" />
      </fieldset>
    </form>
  </body>
</html>

JOIN

USER INFO

Name

ID

Checking ID

Password

Password

Click your Gender Man Woman

phone

Location

E - Mail

Birthday

Agreement Agree Disagree