양식 폼 만들기

- 2022.06.17
이번엔 HTML을 이용하여 간단한 양식을 만들어보기로 했다.
단순하게 input 태그를 사용하여 만드는 게 아닌 조건을 세워서 만들어보기로 했다.

☑ 조건 ☑

1. 개인정보를 입력하기 때문에 자료공개 방식은 공개되지 않도록 할 것.
2. 이름을 입력하는 칸은 꼭 이름이라는 값을 입력해야 다음페이지로 넘어갈 수 있게 할 것. (입력값 없을 시 경고창 생성)
3. 지원분야 선택 시 단추 칸뿐만 아니라 각 요소의 이름을 눌러도 선택이 가능할 것.

 

---

다양한 input 태그를 사용하여 만든 '입사지원서'

 

---

먼저

첫번째 조건인, 개인정보를 입력하기 때문에 자료 공개 방식은 공개되지 않도록 할 것.
입사지원서 양식은 지원자들의 개인정보가 들어가기 때문에 더욱더 조심해야 한다.
그렇기 때문에 자료공개 방식은 공개되지 않도록 method 요소에서 post로 작성해주었다.

<form action="데이터베이스_주소" method="post">

post는 개인정보 등 공개하면 안 되는 정보를 공개나 기록이 되지 않도록 하기 위해서 작성한다.
그러나 정보를 공개해도 되는 게시판이나 기록이 남은 검색창에서는 get을 사용하여 주소표시줄에 공개된다

수달을 검색했을때 주소표시줄에 남는 '수달' method 요소에서 get로 작성한다.

form action = "데이터베이스_주소" ... 는 기업의 데이터 주소를 입력할 수 있도록 비워두었다.
(백엔드 개발자분들이 입력해주신다고 한다. 알려주신다면 프런트엔드 개발자가 입력!)



두 번째 조건, 이름을 입력하는 칸은 꼭 이름이라는 값을 입력해야 다음 페이지로 넘어갈 수 있게 할 것.

(입력값 공백 시 경고창 생성)

 

<p>이름 : <input type="text" placeholder="공백이없게입력하세요." required></p>

혹시라도 사용자가 그냥 넘어갈 수 있기 때문에 placeholder를 사용하여 입력창에 "공백이 없게 입력하세요."
가 나올 수 있도록 했다.
또한 조건을 성립하기 위에 required를 입력하여 넘어가지 못하도록 선택했다.

세 번째 조건, 지원분야 선택 시 단추 칸뿐만 아니라 각 요소의 이름을 눌러도 선택이 가능할 것.

<p><input type="radio" name="분야" value="웹 퍼블리싱"> 웹 퍼블리싱</p>

<label> 태그의 타입 중 radio를 사용했다. 여기서 유의할 점은 name속성은 항상 동일해야 한다.
하지만 저 코드만 작성할 경우 조건의 처럼 지원분야의 항목을 선택하면 선택이 되지 않고 앞의 동그라미 단주를 눌러야지만 선택이 된다.

그렇기 때문에 조건이 성립하도록 <label> 태그를 사용해야 한다.

태그를 사용하여 이름을 눌러도 선택이 가능하다!

<p><label><input type="radio" name="분야" value="웹 퍼블리싱"> 웹 퍼블리싱</label></p>
<p><label><input type="radio" name="분야" value="웹 애플리케이션 개발"> 웹 애플리케이션 개발</label></p>
<p><label><input type="radio" name="분야" value="개발 환경 개선"> 개발 환경 개선</label></p>

마찬가지로 name 속성은 동일해야 한다.

이 밖에도

<select>태그와 <option>을 사용하여 스크롤로 코딩능력 항목 표현했다.

<h3>코딩능력 : 
    <select>
         <option value="상">상</option>
         <option value="중">중</option>
         <option value="하">하</option>
    </select>
</h3>

 

 

---

✎ 알게 된 점

• 정보를 공개 및 비공개를 신경 써야 한다는 점.(제일중요!)
• 다양한 태그들을 사용하여 다른 양식으로도 활용이 가능한 점.

✎ 아쉬운 점

• 구역을 나누어 html을 작성하는 것이 아직은 부족하다.(이에 대해서는 더 알아봐겠다.)

이번에는 html에서 input 등 여러 태그와 요소를 사용하여 간단한 양식을 만들어볼 수 있었다.
다음번 시간에는 해당 양식에서 css를 사용하여 꾸며보는 것을 해봐야겠다.