html / 01 / 기초-6

DOMADO·2024년 5월 29일
html
0

html

목록 보기
6/6

사용자에게 입력(input)을 받은 데이터를
한번에 묶어서 전달하기 위한 태그 👉 form 태그

  • input만 단독으로 사용 불가 !! (폼 태그로 감싸줘야 한다.)
  • 필수 작성 속성 : action ► 데이터를 보내줄 서버의 주소
  • 통신 방식 설정 : method ► get, post / (기본값 get 방식)
<form action="#" method="get"></form>

#: 현재 페이지를 의미


  • get 방식 : 컴퓨터끼리 데이터 주고 받을때, url에 정보로 주고 받는 형식
    (ex 네이버 검색하고 주소 젤 뒤에 보면 검색어가 젤 위에 뜸)
    기본값은 모두 get 방식임

    단점 : 보안 취약
    장점 : 빠르다

  • post 방식 : url에 데이터를 표시하지 않음
    장점 : 보안에 좋다
    단점 : 좀 더 복잡하겠죠?..


입력(input)에 대해서 . .

아이디 : <input type="text" placeholder="아이디를 써주세요" name="id">
비번 : <input type="password" placeholder="비밀번호 쓰세요" name="pw">

아이디 : ◀ 자리표시자 여기선 작동 x
비번 : ◀ 자리표시자 여기선 작동 x

  • 모든 input 태그에는 반드시 name, value를 작성
    (아이디,비밀번호 입력 데이터의 경우 value는 공란 ► 쓰면 미리 적혀짐)

  • name : 같은 그룹임을 명시하는 속성

  • value : 실제 선택한 태그의 값
    (모든 input태그는 데이터가 value에 담긴다.) ► 중복 안 되겠지?!(고유데이터)


체크박스 종류 2가지

  1. 체크박스 : 중복 선택이 가능하다.
  2. 라디오 : 중복 선택이 불가능하다.
취미 : 축구 <input type="checkbox" name="hobby" value="축구"> 야구 <input type="checkbox" name="hobby" value="야구">
  • name(그룹) 은 'hobby'로 통일, 각 고유의 값(value) 지정
    취미 : 축구 야구 
성별 : 남자 <input type="radio" name="gender" value="남자"> 여자 <input type="radio" name="gender" value="여자">
  • name(그룹) 은 'gender'로 통일, 각 고유의 값(value) 지정
  • 동일 그룹으로 하는 이유 : 라디오는 1개만 선택하니까
    성별 : 남자 여자 ◀ 라디오 여기선 작동 x

그 외 또 다른 인풋들

<input type="file" name="file">
<input type="range" name="range">
<input type="color" name="color">
<input type="date" name="date">
<input type="datetime-local" name="datetime">

👇 아래 실제 실행 코드 👇










리스트 형태로 데이터를 제공해서
사용자가 선택할 수 있는 태그 👉 select 태그

  • 리스트 (li태그) 처럼,
    select태그안에는 (option태그)가 꼭 있어야 한다!
    (name 태그는 없어도 되지만, value값도 필수 !)

[❓] name 태그 없어도 되는 이유

  • option태그를 감싸는 select 태그에 name태그를 사용하므로,
    option 태그에 name 태그를 쓰지 않는다.

<select name="email">
        <option value="naver">naver.com</option>
        <option value="'daum">daum.com</option>
        <option value="google">google.com</option>
</select>
naver.com daum.com google.com ◀ 글쓰기 수정모드에서는 작동함

사용자에게 많은 양의 글자를 입력받는 공간 👉 textarea 태그

<textarea>여기다가 글씨 써보세요</textarea>

◀ 글쓰기 수정모드에서는 작동함

입력폼에서 맨 마지막에 반드시 필요 한 태그 👉 submit, reset 태그

  • 제출버튼, 초기화버튼

[❗] 제출버튼 특징

  • form안에서 버튼태그를 생성을 하면,
    컴퓨터가 무조건 submit버튼이라고 인식
  • form안에서 순수하게 버튼으로 사용하고 싶다면,
    type 버튼이라고 명시하자
<form>
       <button>중복조회</button>  👉 ⛔submit버튼이라고 인식
       <button type="button">그냥박스</button> 👉 ⭕그냥박스로 인식
       <input type="submit">
       <input type="reset">
</form>
       <button>그냥박스</button> 👉 ⭕그냥박스로 인식
<input type="submit">
<input type="reset">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        th{
            background-color: yellow;
        }
    </style>



</head>
<body>
    <form actiom="#" method="get">
        <table border="1px solid black" width="400px">
            <tr>
                <th colspan="2"  height="50px">
                    아이디/비밀번호 입력
                </th>
            </tr>

            <tr bgcolor="whitesmoke" height="30px">
                <td align="right">
                    아이디
                </td>
                <td>
                    <input type="text" name="id">
                </td>
            </tr>
            <tr bgcolor="whitesmoke" height="30px">
                <td align="right">
                    비밀번호
                </td>
                <td>
                    <input type="password" name="pw1">
                </td>
            </tr>
            <tr bgcolor="whitesmoke" height="30px">
                <td align="right">
                    비밀번호확인
                </td>
                <td>
                    <input type="password" name="pw2">
                </td>
            </tr>
            <tr>
                <th colspan="2"  height="50px">
                    개인정보
                </th>
            </tr>
            <tr bgcolor="whitesmoke" height="30px">
                <td align="right">
                    성별
                </td>
                <td>
                    남<input type="radio" name="gender" value="남자"> 여<input type="radio" name="gender" value="여자">
                </td>
            
            </tr>
            <tr bgcolor="whitesmoke" height="30px">
                <td align="right">
                    혈액형
                </td>
                <td>
                    <select>
                        <option value="a">A형</option>
                        <option value="b">B형</opion>
                        <option value="o">O형</option>
                        <option value="ab">AB형</option>
                    </select>
                </td>
            </tr>
            <tr bgcolor="whitesmoke" height="30px">
                <td align="right">
                    생일
                </td>
                <td>
                    <input type="date" name ="date" value="date">
                </td>
            </tr>
            <tr height="30px">
                <th colspan="2"  height="50px">
                    선호도
                </th>
            </tr>
            <tr bgcolor="whitesmoke" height="30px">
                <td align="right">
                    취미
                </td>
                <td>
                    축구<input type="checkbox" name="hobby" value="축구"> 야구<input type="checkbox" name="hobby" value="야구">농구<input type="checkbox" name="hobby" value="농구">
                </td>
            </tr>
            <tr bgcolor="whitesmoke" height="30px">
                <td align="right">
                    좋아하는 색깔
                </td>
                <td>
                    <input type="color">
                </td>
            </tr>
            <tr>
                <th colspan="2"  height="50px">
                    적고 싶은 말
                </th>
            </tr>
            <tr bgcolor="whitesmoke" height="30px">
                <td height="100px" colspan="2px">
                    <textarea cols="60" rows="10"></textarea>
                </td>
            </tr>
            <tr bgcolor="whitesmoke" height="30px" align="center">
                <td colspan="2px">
                    <input type="submit"> <input type="submit">
                </td>
            </tr>
            
        </table>
    </form>

</body>
</html>
profile
DOMADO
▪️ 검정 테마를 기준으로 작성되었읍니다.
이전 포스트

html / 01 / 기초-5

0개의 댓글