44일차 - 폼태그 (관계형DB) +sql

밀레·2022년 11월 25일
코딩공부
0

코딩공부

목록 보기
110/135
post-thumbnail

1. 백엔드(sql)와 연동하는 '폼'

1-1. form 태그 만들기

  • action : 폼을 넘길 주소 (url 또는 html 링크)
  • method : 전송방식 post & get (대용량 멀티 data 전송가능)
  • name : 폼 이름 (폼 자체의 변수명 지정)
  • id : name과 같을 필욘 없는데, name도 유일무이하니까 걍 무임승차
  • autocomplete : 자동 완성

< form > 내부의 < input > 태그 : 사용자가 정보를 직접 입력하는 부분

  • type 인풋 태그의 타입 지정 (단순 텍스트입력란 or 이메일 or 전화번호 or 파일첨부 등)
  • required 필수 입력란
  • placeholder 필드 클릭시 내용 사라짐
  • maxLength
  • step 숫자 간격 설정
  • readonly 읽기 전용 필드
  • autofocus 페이지가 열리자 마자 특정 란에 마우스 커서가 표시

< input >의 type 속성

  • text : 한줄 정도의 텍스트란
  • checkbox : 체크박스 (2개 이상 선택 가능)
  • radio : 라디오 버튼 (1개만 선택 가능)
  • tel : 전화번호 입력 필드
  • url : url 입력 필드
  • email : 이메일 입력 필드
  • password : 비밀번호 입력 필드
  • number : 화살표로 숫자 조절
  • range : 숫자 범위 조절용 슬라이드 막대
  • datetime : 국제 표준시 연월일
  • file : 파일 첨부
  • submit : 서버전송 버튼
  • image : submit 대신 이미지 사용하기
  • reset : 입력한 내용 모두 리셋

출처 https://inpa.tistory.com/entry/HTML-%F0%9F%93%9A-%ED%8F%BCForm-%ED%83%9C%EA%B7%B8-%EC%A0%95%EB%A6%AC#_%3Cinput%3E%EC%9D%98_type_%EC%86%8D%EC%84%B1

1-2. 제출하는 놈, input ( type="submit" )

<form action="https://~~~.cafe24.com/pwa/" method="get" name="contact" id="contact">
	<input type="submit" value="보내기">
</form>

1-3. 인풋 & 라벨label

<form action="https://~~~.cafe24.com/pwa/" method="get" name="contact" id="contact">
	<input type="text" name="nm"><label>한국이름</label>
	<input type="submit" value="보내기">
</form>

1-4. 라디오버튼 ○ ◉ ○ ○ ○

name="study" // 둘다 name이 같다 (=둘 중 하나 택1 하므로)

<form action="https://~~~.cafe24.com/pwa/" method="get" name="contact" id="contact">

	<p>
      <input type="text" name="nm"><label>한국이름</label>
	</p>
    
	<p> <!-- 라디오버튼, 둘다 name이 같다(= 둘 중 하나 택1 하므로) -->
		<input type="radio" name="study" value="react"><label>리액트</label>
		<input type="radio" name="study" valuse="node"><label>노드</label>
	</p>
    
    <input type="submit" value="보내기">
</form>

1-5. 전화번호는 배열로 받기 (순서가 있는 숫자)

<form action="https://~~~.cafe24.com/pwa/" method="get" name="contact" id="contact">

	<p>
      <input type="text" name="nm"><label>한국이름</label>
	</p>
    
	<p> <!-- 라디오버튼, 둘다 name이 같다(= 둘 중 하나 택1 하므로) -->
		<input type="radio" name="study" value="react"><label>리액트</label>
		<input type="radio" name="study" valuse="node"><label>노드</label>
	</p>
    
    <p>            
		<input type="text" name="hp[0]" max="3"> <!-- 010 -->
        -
		<input type="text" name="hp[1]" max="4"> <!-- 5678 -->
        -
		<input type="text" name="hp[2]" max="4"> <!-- 1234 -->
	</p>
    
    <input type="submit" value="보내기">
</form>

1-6. submit을 이미지로 대체하기

<form action="https://~~~.cafe24.com/pwa/" method="get" name="contact" id="contact">

	<p>
      <input type="text" name="nm"><label>한국이름</label>
	</p>
    
	<p> <!-- 라디오버튼, 둘다 name이 같다(= 둘 중 하나 택1 하므로) -->
		<input type="radio" name="study" value="react"><label>리액트</label>
		<input type="radio" name="study" valuse="node"><label>노드</label>
	</p>
    
    <p>            
		<input type="text" name="hp[0]" max="3"> <!-- 010 -->
        -
		<input type="text" name="hp[1]" max="4"> <!-- 5678 -->
        -
		<input type="text" name="hp[2]" max="4"> <!-- 1234 -->
	</p>
    
    <input type="image" src="./banner2.png" value="보내기">
</form>

1-7. label for=""과 id="nm 연결"

  • 이름 인풋란) 인풋태그 id = 라벨태그 for
    name = id = for
  • 라디오 버튼) 인풋태그 id = 라벨테그 for
    name ≠ id = for

<body>
    <form action="https://~~~~.cafe24.com/pwa/" method="get" name="contact" id="contact">
    
        <p><!-- 이름 인풋란 -->
            <input type="text" name="nm" id="nm"><label for="nm">한국이름</label>
        </p>
        
        <p><!-- 라디오버튼 -->
            <input type="radio" name="study" id="study0" value="react"><label for="study0">리액트</label>
            <input type="radio" name="study" id="study1" valuse="node"><label for="study1">노드</label>
        </p>

        <p><!-- 전화번호 인풋란 -->          
            <input type="text" name="hp[0]" max="3"> <!-- 010 -->
            -
            <input type="text" name="hp[1]" max="4"> <!-- 5678 -->
            -
            <input type="text" name="hp[2]" max="4"> <!-- 1234 -->
        </p>
        
        <input type="image" src="./banner2.png" value="보내기">
    </form>
</body>

2. 면접제안 인풋란, sql 위한 테이블 만들기

연락처 컨텐츠 구현하기

  • 폼태그는 DB와 연동되는 부분이라 必 DB 설계해야 함! (= sql 테이블 세팅해야 함!)
    테이블 모양으로 만들기 (라벨 - 필드명 - 데이터타입 - 필수여부)
  • 자바스크립트 부분 : 개인정보정책 컨텐츠 必 !
  • 전송받을 페이지(=form의 action)는 php 파일로 전송받은 데이터를 sql문으로 DB 특정 테이블을 저장함

제작 프로세스
① UI를 피그마로 제작
② CSS 요소 & 태그 요소를 구분(img svg 배경이미지 등) → 소스를 분리해 저장
③ 태그 에밋 컨펌 후, 구조완성 → 스타일적용 → 인터페이스(반응형 처리 등) 완성!!

④ 자바스크립트 부분 (최소한 사용)

  • 개인정보정책, 이메일의 직접입력부분 등
  • 유효성 검사(허수의 정보가 아닌지) - html5기능 활용 required
    검색어 : "html 폼태그 유효성검사"

⑤ 백엔드 작업 차례
(php파일/폼태그의 전송된 데이터를 sql로 DB테이블에 저장 & 성공여부 전달페이지 저장)

2-1. UI완성

활성화 시 모습 (피그마, 따로 떼서 옆에 두기)

2-2. 테이블 만들기

  • 내가 작성한 테이블

  • 피드백) 진짜 HTML 태그가 아니라, 폼태그 타입 속성을 써야 함

  • 시연한 테이블
회사명		company		string	text		not null(필수)
회사위치		loaction	string	select		null
채용직무		position	array	checkbox    not null(필수)
주력언어		ability		array	checkbox    not null(필수)
담당자명		manager		string	text 	   	not null(필수)
연락처		call		string	text	   	null
면접날짜		dday		string	date	    null
면접시간		dtime		array	select/text null
남기실말		message		text	textarea    null
  • 내껄로 해본다면
채용직무		position	array	checkbox    not null(필수)
기업명		company		string	text		not null(필수)
담당자명		manager		string	text 	   	not null(필수)
회사위치		loaction	string	text		null
연락처		email		string	text	   	null
사수여부		isBoss		string	text		not null(필수)
면접날짜		dday		string	date	    null
남기실말		message		text	textarea    null

3. 에밋 짜기

li는 총 9개가 필요하다! (ul>li*9)

3-1. 회사명

name & id = company인 < input > 태그

li>div.line>label+input[name=company]#company[required]
  <!-- 회사명 -->
  <li>
      <div class="line"><label for=""></label>
          <input type="text" name="company" id="company" required>
      </div>
  </li>

3-2. 위치

li>div.line>label{회사위치}+select[name=location]>option[value='지역명']*5{지역명}
	<!-- 회사 위치 -->
	<li>
		<div class="line"><label for="">회사위치</label>
			<select name="location" id="">
                <option value="지역명">지역명</option>
                <option value="지역명">지역명</option>
                <option value="지역명">지역명</option>
                <option value="지역명">지역명</option>
                <option value="지역명">지역명</option>
			</select>
		</div>
	</li>

3-3. 주력언어(=채용직무)

li>div.line.otherLine>label{주력언어<span>중복선택가능</span>}
					  p>input[type=checkbox][name=ability[ $ ]][value="리액트,"노드 등"]+label{텍스트} // name=배열이므로[ $ ]
(input[type=checkbox][name=ability[$]]#ability$+lable[for=ability$])*5
	<!-- 주력 언어 -->
	<li>
		<div class="line otherLine">
			<strong>주력언어<span>중복선택가능</span></strong>
			<p>
				<input type="checkbox" name="ability[0]" id="ability0" value="react">
				<lable for="ability0">리액트</lable>
				<input type="checkbox" name="ability[1]" id="ability1" value="node">
				<lable for="ability1">노드</lable>
				<input type="checkbox" name="ability[2]" id="ability2" value="scss">
				<lable for="ability2">php</lable>
				<input type="checkbox" name="ability[3]" id="ability3" value="php">
				<lable for="ability3">SCSS</lable>
				<input type="checkbox" name="ability[4]" id="ability4" value="javascript">
				<lable for="ability4">제이쿼리</lable>
			</p>
		</div>
	</li>

  • 내꺼에 적용하기
<body>
    <form action="http://~~~~.cafe24.com/pwa/" method="post" name="contact" id="contact">
        <li>
            <div class="line">
                <input type="checkbox" name="position[0]" id="position0" value="frontend">
                <label for="position0">프론트엔드</label>
                <input type="checkbox" name="position[1]" id="position1" value="publisher">
                <label for="position1">퍼블리셔</label>
                <input type="checkbox" name="position[2]" id="position2" value="marketing">
                <label for="position2">기획/마케팅</label>
                <input type="checkbox" name="position[3]" id="position3" value="design">
                <label for="position3">디자인</label>
            </div>
        </li>
        
        <li>
            <div class="line">
                <input type="text" name="company" id="company" placeholder="기업명" requierd>
            </div>
        </li>

        <li>
            <div class="line">
                <input type="text" name="manager" id="manager" placeholder="담당자명">
            </div>
        </li>

        <li>
            <div class="line">
                <input type="text" name="loaction" id="loaction" placeholder="회사위치">
            </div>
        </li>

        <li>
            <div class="line">
                <input type="text" name="email" id="email" placeholder="연락처" requierd>
            </div>
        </li>

        <li>
            <div class="line">
                <input type="text" name="isBoss" id="isBoss" placeholder="사수여부">
            </div>
        </li>

        <li>
            <div class="line">
                <input type="date" name="dday" id="dday" placeholder="면접날짜">
            </div>
        </li>

        <li>
            <div class="line">
                <input type="textarea" name="message" id="message" placeholder="남기실말">
            </div>
        </li>

        <input type="submit" value="제안하기">
    </form>
</body>

profile
밀레
이전 포스트

43일차 - 스와이퍼 반응형

다음 포스트

45일차 - 폼 CSS (부트스트랩으로)

0개의 댓글