Front-end/HTML

4. Form 요소 와 엔티티 기호

Dev.BeryL 2018. 7. 23. 09:40
728x90

이번 포스팅은 로그인화면을 구현 하기 위한 기초적인 Form 요소에 관하여 알아보겠습니다.



From 이란 검색이나, 로그인, 회원가입 등 사용자가 입력한 구문을 서버로 넘기기 위한 입력 서식 요소라고 볼 수 있겠는데요 

사진으로 한번 알아볼까요 ?


(사진 출처 : Daum 로그인 화면, 검색입력창)




이런식으로 다음에 로그인을 하기 위한 입력과 검색어 입력을 하는 부분은 모두 폼으로 이루어져 있습니다.



정말로 폼으로 이루어져 있는지 확인을 하려면 개발자 도구를 이용하여 확인해보면 쉽게 볼 수 있습니다. 



확인을 해보면 실제로 다음 로그인 화면에 실제로 form을 사용하였네요 아직 학습하지 않은 여러 요소들이 있지만 이중에 오늘 하게될 폼 요소에 대해서 알아보겠습니다.


먼저 코드를 보게되면 


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>유저 입력 폼</title>
</head>
<body>
    <h1><a href = "https://naver.com">NAVER</a></h1>
    <h2>통합검색</h2>
    <form action="https://search.naver.com/search.naver" method="get">
        <fieldset>
            <legend>검색</legend>
            <input size="50" name="query" type="text" placeholder="검색어를 입력하세요">
            <button type="submit" formtarget="_blank">검색</button>

        </fieldset>
    </form>
    <!--
    클라이언트에서 서버로 넘어가는 데이터가 '파라미터'
    파라미터는 name과 value로 구성

    form 요소
    - 검색, 로그인, 회원가입등 유저가 입력한 정보를 서버로 넘기기 위한입력 서식 요소
    - 반드시 써야하는 속성 : action / method (default : GET)
    - action 속성 : 서버의 자원(주소)

    fieldset 요소
    - 폼안에서 입력필드를 내용상으로 묶어주는 역할을 하는 요소

    legend 요소
    - 폼의 범례(제목)

    input 요소
    - size 속성 : 입력글자의 길이
    - placeholder 속성 : 유저에게 입력할 내용을 설명해줌
    - type속성의 값이 굉장히 다양함 (default : text)
    - name 속성 : 서버로 넘어갈 파라미터의 이름(name)

    button 요소
    - 버튼을 나타내는 요소
    - type속성의 값 : button, submit, reset이 있음
                        (default : form안에서는 submit)
   -->
</body>
</html>


이런식으로 코드가 구성이 되어있습니다. 저번에 했던 화면보다 글자크기와 테마를 좀 변경하였습니다.


우선 이 코드를 보게되면 어떤 실행화면이 나올까 확인해 보겠습니다.



이런식으로 화면이 구성이 되었습니다. 화면을 분석해보면 h1 요소에 a 요소를 넣어 하이퍼링크를 만들게 되었고


h2 요소를 통합 검색이라 기재하였습니다.


form 안에는 반드시 써야하는 두개의 속성을 기재하였으며 안에서 fieldset 요소는 검색 옆에 감싸고있는 선이 보이시나요 ? 이 감싸는 역할을 하는것이 바로 filedset 요소이며 검색이라는 글자는 legend 요소입니다.


input 요소는 글자를 입력할 수 있도록 지정하였고 type이 지금은 text로 기재하였지만 훨씬 다양한 type이 존재합니다.

그리고 input 요소는 그 안에 글자가 서버로 전송이 됩니다. 하지만! 서버로 전송이 되기 위해서는 name 속성을 반드시 써주어야 합니다. 


name을 쓴 것과 안쓴것의 차이를 보겠습니다. 그전에 form 에서 action 속성은 실제 네이버 사이트가 검색을 하기 위하여 써주는 action 의 값을 가져와 작성하였습니다. action 속성의 값을 실제 있는 값으로 쓴 이유는 쉽게 결과를 보여주기 위함입니다.



예를들어 이 안녕하세요 ? 라는 구문을 한번 입력해보고 검색을 해보겠습니다.


참고하여 알아두실 점은 button 은 submit 으로 기재하여 서버로 전송을 하게됩니다.

버튼도 여러 타입이 존재하는점 알으셔야합니다. 


만약 이 구문을 입력하게되면 어떻게 될까요 ?




1. name 속성을 기재하지 않는다. 



보이시나요 ? 검색한 결과가 뜨지 않습니다.



하지만 2. name 속성을 기재한다.





이런식으로 검색 결과가 뜨게됩니다.  위 사진과 이번사진에서 차이점은 바로 주소창에 있는 구문입니다. 


주소창에 구문을 보시면 query=안녕하세요%3F 라고 입력이 되어있는데요, 이 구문이 클라이언트에서 서버로 넘어가는 데이터인 파라미터 라고 합니다.  이 구문을 바로 쿼리스트링이라고 하는데 다음 포스팅에서 자세히 알려드리려고 합니다 !


어느정도 Form에 대한 이해가 되었을거라 생각합니다.



다음 으로는 엔티티 기호에 대해서 알아보려고 하는데요 ~




<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>엔티티 기호</title>
</head>
<body>
    3>5<br/>
    3 &lt; 5<br/>
    &lt;a&gt;<br/>
    &copy;<br/>
    25&deg; <br/>
    & <br/>
    앤트맨  &amp; 와스프

<!--
    (과거) 브라우저에서 '<'꺽쇠를 만나면
    열림태그로 인식했음
    - < : &lt;
    - > : &gt;
    - &copy;
    - &deg;
-->
</body>
</html>


엔티티 기호는 다양해서 대표적인 몇가지만 알아보도록 하겠습니다. 엔티티 기호에 대한 설명은 모두 주석으로 대체 하였습니다 그리고 한번

코드를 보게되면 처음 보는 구문들이 있는데요 '&xxx' 이러한 구문이네요 이 코드를 가지고 결과를 한번 보게되면


이런식으로 결과가 나오게됩니다. 브라우저에서는 여러가지 이런 기호들을 웹 표준에 맞게끔 엔티티 기호를 활용하게됩니다.


엔티티 기호에 대하여 어떠한 엔티티 기호가 있는지는 검색을 통해 쉽게 찾아볼 수 있습니다.



그럼 이번 포스팅은 여기까지 입니다. 다음 포스팅에서는 실제로 다음 웹사이트를 따라해서 결과를 만들어 보는 시간을 갖겠습니다.


 



반응형
저작자표시 비영리 (새창열림)

'Front-end > HTML' 카테고리의 다른 글

5. 다음 UI (솔루션 코드)  (1) 2018.07.23
5. 다음 UI 만들어보기  (0) 2018.07.23
3. 이미지와 하이퍼링크  (0) 2018.07.22
2. 리스트 관련 요소들  (0) 2018.07.22
1. 제목 요소 및 p와 br요소  (0) 2018.07.22

'Front-end/HTML'의 다른글

  • 현재글4. Form 요소 와 엔티티 기호

관련글

티스토리툴바