[html] step09. form

step09. form

 검색창. 로그인 양식 등등. 모두 form이다. form이란 무엇인가?

 예를 들어 검색창에 입력한 정보는 어떻게 될까? server로 전송되고, 그에 해당하는 정보를 받아오게 된다. 즉, form은 server에 전송되는 양식이라는 것이다. 지금은 server가 없기 때문에 테스트는 할 수 없다.

 

 

    <h1>form element 작성하기</h1>
    <!--
        form은 서버에 전송할 양식이다
        action="서버에 전송할 위치(요청경로)"
        현재는 서버가 없기 때문에 action을 테스트 할 수는 없다.
    -->
    <form action="login.jsp">
        <!--
            label의 for attribute value와
            input의 id attribute value가 동일하게 작성되어야 한다.
        -->
        <label for="email">이메일</label>
        <input type="text" id="email" name="email">
        <!--
            name 속성의 값은 서버에서 필요한 값이다.
        -->
        <label for="pwd">비밀번호</label>
        <input type="password" id="pwd" name="pwd">

        <button type="submit">로그인</button>
        <button type="reset">취소</button>
    </form>

1. <label>과 <input>은 세트이다.
2. <input> 의 id와 name 속성. 이들은 서로 같을 필요도 없지만 같을 필요도 없다고 했다. name은 server에서 필요한 값이다. 예를 들어 email, password로 로그인하면 server로 값을 전송한다. 이 server에서 값을 서로 구분하기 위한 것이 name이다.
3. <label>의 for 속성이 가리키는 것은 input의 id를 가리킨다.
4. <label>을 지우고 그 inner text에 해당하는 내용만 작성해도 시각적으로는 차이가 없다. 하지만 이렇게 작성하는 이유는 web browser를 이용하는 시각장애인을 위해서다. 시각장애인의 경우 앞이 잘 안보이기 때문에 tab을 이용해서 사용하는데, <label>의 for 속성 value가 <input>의 id 속성 value와 같을 때 <label>의 inner text 값을 읽어준다.
5. 예시에서는 email과 password이지만 server에서 east와 west였다면 이를 써야한다. 즉 server에서 구분한대로 name이 결정되는 것인데, 이때문에 front 개발자는 이 자리를 비워두고 작성한다고 한다.
6. type 속성이 password인 것은 작성한 내용이 보이지 않는다.

 

        <!--
            fieldset, legend element가 왜 필요한지와
            label text를 제공하는 새로운 방법을 익히세요
            input type="radio"에서 name attribute value가 같으면
            같은 group으로 묶인다.
        -->
        <fieldset>
            <legend>성별 정보 선택</legend>
            <label>
                <input type="radio" name="gender" value="male" checked> 남자
            </label>
            <label>
                <input type="radio" name="gender" value="female"> 여자
            </label>
        </fieldset>

 

1. radio type은 선택.
2. 전송되는 값을 value로 직접 명시해주어야 한다.
3. <input type="text" name="gender"> 에 male/female을 입력한 것과 같은 것이다.
4. name이 같으면 같은 group으로 묶이며, 중복으로 선택할 수 없다.
5. <label> 안에 <input>을 포함시키면 label 이 radio의 text 역할을 한다. 따로 label의 for와 input의 id를 일치시켜줄 필요가 없다.
6. <fieldset>은 내용에 boundary를 쳐준다. 그리고 그 boundary가 어느 단락인지 추가 정보를 제공하고 싶다면 <legend>로 명시한다.

 

 

        <!--
            input type="checkbox" 는 name attribute value이 모두 같아도 
            그룹으로 묶이지 않는다.
        -->
        <fieldset>
            <legend>취미 정보 선택</legend>
            <label>
                <input type="checkbox" name="hobby" value="football"> 축구
            </label>
            <label>
                <input type="checkbox" name="hobby" value="baking"> 베이킹
            </label>
            <label>
                <input type="checkbox" name="hobby" value="piano"> 피아노
            </label>
            <label>
                <input type="checkbox" name="hobby" value="guitar"> 기타
            </label>
        </fieldset>

•  radio와 다르게 checkbox는 group이 같아도 중복 선택이 가능하다.

 

        <label for="job">직업선택</label>
        <select name="job" id="job">
            <option value="">선택</option>
            <option value="programmer">프로그래머</option>
            <option value="doctor">의사</option>
            <option value="musician">뮤지션</option>
            <option value="etc">기타</option>
        </select>

 

 

• 여러 곳에서 흔히 봐온 선택창은 <select>와 <option>으로 만든다.

 

 

        <label for="lunch">점심 선택</label>
        <!-- option에 value가 없으면 inner text가 전송된다.-->
        <select name="lunch" id="lunch">
            <optgroup label="분식">
                <option>라면</option>
                <option>쫄면</option>
                <option>김밥</option>
            </optgroup>
            <optgroup label="중식">
                <option>자장면</option>
                <option>짬뽕</option>
                <option>군만두</option>
            </optgroup>
        </select>

 

 

•  <optgroup> 으로 만든 선택창은 모양만 약간 달라진다. 이 경우에는 <option>에 value 값이 명시되지 않으면 inner text가 전송된다.

 

 

        <label for="myfile">첨부파일</label>
        <input type="file" id="myfile" name="myfile">
        <br>
        <label for="comment">하고싶은말</label>
        <br>
        <textarea name="comment" id="comment" cols="30" rows="10"></textarea>

1. file type은 file을 upload하는 form이다.
2. <textarea> rows와 cols 속성으로는 크기 결정이 정확하지 않기 때문에 css를 이용해서 따로 원하는 크기를 결정한다. 혹시라도 이들을 남기고 css를 작성하더라도 css가 우선이니 걱정하지 않아도 되겠다.

 

다음은 html5에서 추가된 요소이다.

    <h1>html5에서 추가된 form element</h1>
    <form action="insert.jsp">
        <label for="color">색상선택</label>
        <input type="color" id="color" name="color">
        <br>
        <label for="range">범위</label>
        <input type="range" id="range" name="range" min="10" max="100" step="1" value="10">
        <br>
        <label for="date">날짜</label>
        <input type="date" id="date" name="date">
        <br>
        <label for="time">시간</label>
        <input type="time" id="time" name="time">
        <br>
        <label for="number">숫자</label>
        <input type="number" id="number" name="number" min="0" max="100" step="10">
        <br>
        <button type="submit">저장</button>
    </form>

1. <color>는 browser 마다 다르다. (chrome, edge, ... . 단, explorer는 안된다.)
   되고 안되고의 기준은 MDN Web Docs (mozilla.org) 이곳을 참고한다. 이곳에서 html 관련 검색 및 공부가 가능하며, browser 호환성도 확인할 수 있다. Mobile web page가 target이라면 웬만하면 다 된다고 한다. 이곳에서 이것저것 확인해보면 좋겠다.
2. <range>는 저장을 누르면 주소창에서 값을 알 수 있다. 이미 배우고 정리하는거라 알고 있지만, javascript를 이용하면 저장을 누르지 않고도 값을 알 수 있다.
3. start가 아닌 min, end가 아닌 max이다. 수업시간에 잘못 적어서 min/max로 고친 것으로 추정된다.
4. <date> 또한 주소창에서 확인 가능하다.
5. browser 호환성에 따라 사용에 주의를 요한다.

MDN Web Docs