HTML/CSS_002. HTML의 FORM

이번 포스팅에서는 HTML에서의 FORM을 위주로, 자주 사용하는 태그들과, 그 태그들을 사용했을 때 어떻게 작동되는지를 정리해 보려고 합니다.

 

#1. <p>

  paragraph. 단락입니다.

  줄바꿈과 여백을 통해 단락을 구분하게되며, 더 간격을 넓히고자 할 때엔 <br>을 추가하거나 css를 사용해야 합니다.

#2. <br>

  A forced line-break. 줄바꿈입니다.

  내용이 없는 태그(void element)이기 때문에, 시작태그 하나만 있으면 사용 할 수 있습니다.

  <br>은 시각적으로 띄워줄 뿐이며, 단락을 나타내고자 할 때에는 <p>태그를 사용해 주는게 좋습니다.

#3. <img>

  웹 페이지에 img를 포함하는 방법입니다.

  꼭 태그를 닫을 필요는 없으며, src속성을 사용하여 포함하고자 하는 파일의 이름을 지정합니다.

  기본적으로 src속성에는 확장자를 포함한 파일명을 입력해줍니다.

  같은 디렉토리에 이미지 파일이 없을경우 아래와 같이 상대경로 혹은 절대경로의 경로를 입력해 줍니다.

  이미지에는 width와 height를 통해 너비와 높이를 입력시킬 수 있으며,

  기본적으로 단위를 입력하지 않았을 때에는 픽셀 단위로 적용이 된다고 합니다

  (아마 나중에 css에서 관련되어 좀 더 자세하게 다루지 않을까 싶습니다.)

  강제로 이미지의 크기를 조절하는 것이기 때문에 원본 파일의 비율이 무시될 수 있습니다.

  이미지가 해당 경로에 존재하지 않는등의, 어떤 요인에 의해서 오류가 발생 될 수 있기 때문에 이때를 대비하여

  alt속성을 사용하여 대체 텍스트를 입력해줍니다.(alternative text).

  이미지에 대한 부가적인 설명을 위해서 title속성을 이용하며, 이미지에 마우스를 올려놓았을 때 툴팁이 표시됩니다.

#4. <table>

  <tr>태그는 tablerow를 의미합니다.

  <td>태그는 tabledata를 의미하며, 실제 데이터를 의미합니다.

  <table>태그는 <tr>, <td>등의 테이블 모든 요소를 감싸는 최상단 태그입니다.

  <table>태그의 border속성을 사용하여 간단한 몇가지 선 종류를 선택 가능합니다. 하지만 보통은 css를 사용합니다.

  예전의 웹 페이지의 경우에는 table을 이용하여 웹 페이지의 레이아웃을 만들기도 했지만, 이는 table의 기본적인 

  기능이 아니며, 요즈음에는 css를 활용합니다.

  생활코딩의 강좌를 기반으로 정리하고있지만, 기억상으로는 실제 표를 생각하게되면, 

  보통은 1행의 내용은 해당 열의 값의 도메인을 총칭하는 역할을 하고있으며,

  아래의 행들은 1행의 내용에 대한 실제 데이터를 담습니다.

  관련해서 <tr><th>이름</th><th>나이</th>...</tr>과 같이 사용하기도 합니다.(table head).

#5. <form>

  대표적인 form의 활용 방법으로는 로그인, 회원가입, 물건 구매 등의 행위로, 클라이언트에서 서버로 값을 전송할 때

  사용하는, 값을 입력 및 선택하여 전송할 수 있도록해주는 태그입니다.

  보통 <input>태그를 사용하여 값을 입력받으며, type속성을 통해서 <input>의 종류를 결정합니다.

  type속성에는 text, password, reset, submit, hidden 등이 있습니다.

  <input type="submit">을 통해서 생성된 버튼을 클릭시 form에 입력한 값들을 전송할 수 있습니다.

  이때, 값이 전송될 목적지로 <form>의 action속성을 이용합니다.

  submit버튼을 누르게되면 action에 명시한 주소로 브라우저가 페이지를 전환합니다.

  <form>에 사용자가 입력한 값들의 구별을 위해서는 각각의 컨트롤에 name속성을 부여하여 구별해 주어야합니다.

  서버에는 각각의 name속성에 대한 value값으로써 값이 전송됩니다.

111, 222라는 값 입력후 submit시켰을때의 모습. blankPage는 없지만 url상 입력값은 get방식으로 정상적으로 송신되었음을 확인 할 수 있음.

#6. <form>태그의 입력 요소들.

  대표적으로 5번에서 작성한 type속성 text와 password가 있습니다.

  사용자의 입력을 받는 태그들은 전송된 값을 판별하기 위하여 name속성을 필수로 요구합니다.

  value속성의 경우에는 페이지를 보여줄때 해당 컨트롤에 기본적으로 사용자에게 표시해줄 값이 들어값니다.

  혹은, type이 hidden인 경우에는 서버에 보내질 값을 의미하게 됩니다.(수동으로 값을 입력할 수는 없으니...)

  이것들 외에도 <textarea>라는 태그가 존재합니다.

  이 태그는 input엘리먼트가 아닌 완전히 새로운 태그입니다.

  입력을 받아들이는 요소는 맞지만, type으로 구분하지 않으며, 이 역시 값을 구별하기 위한 name속성을 요구합니다.

  <textarea>의 cols속성은 column의 줄임말로, 열을 의미합니다. 50의 값을 지정할 경우 textarea의 너비가 50글자가

  입력 될 만큼의 폭을 가지게 됩니다.

  rows속성은 관련하여 textarea의 높이를 지정하게 되며, 10줄을 입력할 만큼의 높이를 가지게 됩니다.

  또한, 다른 input엘리먼트가 value를 통해 기본값을 지정했던것과는 대조적으로, textarea의 경우에는 시작태그와 

  끝나는 태그 안에 값을 입력함으로써 기본값을 표시합니다.

textarea역시 정상적으로 값이 전송됨을 확인 할 수 있다.

#7. 선택

  여러가지 보기를 제시하고 이 중에서 하나 혹은 여럿을 선택하도록 하는 방법입니다

  우선, dropdownList혹은 combobox라고 불리는 컨트롤입니다.

  <option>태그를 이용하여 사용자에게 보여줄 보기를 제시합니다.

  이때, <select>태그를 이용하여 <option>태그들을 묶어 콤보박스를 표기합니다.

  이 역시 <select>태그에 name속성을 입력해 주어야만 정상적으로 값이 전송됩니다.

  전송하고자 하는 값 역시 설정이 가능하며, 사용자에게는 '빨간색'이라고 보여주지만 실제 값의 전송은 'red'라는 

  값을 전송하고자 할 때에는 해당 <option>에 value속성을 지정해주면 됩니다.

  또한, 여러 항목을 선택 할 수 있게 하고싶을 때에는 select태그에 multiple속성이름을 적어주면 됩니다.

  별도의 값은 가지지 않으며, 속성이름만 적어주면 다중선택이 가능하게 됩니다.

  multiple속성의 경우에는 주로 체크박스에서 자주 쓰이게 됩니다.

 

#8. 버튼

  위에서 계속 써 왔지만, submit의 기본 이름은 '제출'이며, value속성을 통해 변경이 가능합니다.

  <input type="button" value="버튼">의 형식을 통해 html에서 버튼을 추가시킬수는 있지만 이는 순수하게 아무

  기능이 없는 ui만 있는 상태입니다.

  순수 html만 사용할 경우에는 의미가 없으며, 이러한 button컨트롤의 경우에는 자바스크립트와 함께 쓰이게 됩니다.

  onclick속성을 사용하며, <script>를 html문서 내에 작성해주거나 인라인으로 onclick="alert('hello world')"의 방법을

  통해 사용하게 됩니다.

  type="reset"의 경우에는 속해있는 form의 모든 정보를 초기화시키는 버튼입니다.

#9. Hidden

  UI가 필요없거나, 또는 UI없이 정보를 서버로 전송하고 싶을 때 사용하는 태그입니다.

  화면상 표시는 되지 않지만, submit시에 hidden타입의 value값이 함께 전송됩니다.

#10. label

  기존에 지금까지 'text : <input type="text"...'와 같이 작성했던것을

  <label>text :</label>과 같이 <label>태그로 감싸주면 이것은 무언가의 이름표다 라는 식의 표현이 됩니다.

  <label>의 for속성을 통하여 <input>태그의 id값을 지정해준다면, label이 해당 태그를 연결짓게 되며,

  이런식의 연결이 일어나게 되면 label을 눌렀을 때에 input태그로 포커스가 맞춰지게 됩니다.

  id값과 for속성을 연결짓기 번거롭다면, 해당하는 <input>요소를 label태그로 감싸줘도 같은 효과를 보입니다.

  이런 기능은 단순하지만 유용하며, 특히 체크박스와 같은 곳에서 좁은 영역을, label을 포함한 넓은 영역의 클릭 가능한

  영역으로 만드는 효과를 제공합니다.

 

#11. get과 post

  form에서 파라미터의 전달은 기본적으로 위에 나와있는것과 같이 url에 파라미터가 표기된 형태로 전송됩니다.

  이러한 방식을 get방식이라고 하며, form에서 데이터 전송의 default 값 입니다.

  하지만 이러한 방식은 아이디, 비밀번호와 같은 개인정보의 전송시에 외부로 정보가 누출될 위험이 있습니다.

  이때, 정보를 감춰서 전달하고자 할 때 사용하는 방식이 post입니다.

  <form action ="" method="post">와 같은 방식으로 전송 방식을 지정해 줄 수 있습니다.

  post방식의 경우에는 정보를 감춰 전달하기 때문데 url상에 입력한 정보가 표기되지 않습니다.

  사용자가 form을 사용한다 == 사용자가 서버로 정보를 전송한다 이므로

  대부분의 form을 사용한 작업은 post로 작성해야 합니다.

#12. 파일 업로드

  이 경우에는 강좌에서도 그렇게 나왓지만, 사실 서버쪽에서 처리해야할 작업이 더 많다고 합니다.

  우선 html의 입장에서 보게되면

  <input type="file">의 형식을 통해 파일을 등록하여 action으로 전송 시킬 수 있습니다.

  이때, 파일 전송을 위해서는 method="post"로 지정해야하며,

  enctype="multipart/form-data"로 enctype속성을 명시해 주어야만 합니다.

  파일 관련 데이터가 단 하나라도 있다면 multipart/form-data로 지정해 주어야만 합니다.

  물론, file태그 역시 name속성이 필요합니다.

  (파일의 경우에는 아직 직접 보여줄 방법이....)