HTML: 폼(FORM)의 기능과 구현

1. 폼 태그의 기능

폼 태그는 입력받은 정보 가지고 서버에 저장 하거나 해당 정보를 출력해주는 역할을 합니다.

즉, 우리가 흔히 사용하는 로그인 및 로그인을 위한 회원가입, 검색, 지금 제가 하고 있는 글 작성도 폼 태그에 둘러싸여있고 해당 정보를 서버에 보내주는 역할을 해요.

 

 2.폼 태그의 속성

폼 태그 속성에는 action, name, method, target, accept-charset이 있습니다.

<form action="" method="" target="" accept-charset="" name=""></form>

• action : 폼 작동시 작동 될 스크립트를 지정합니다.
• name: 해당 폼의 이름을 정해줍니다.
• method : 내용 전달시 GET(내용 공개형)으로 받을지 POST(내용 비공개형)로 받을지를 정합니다. POST를 사용하는 경우는 로그인을 할 때 외부인들이 로그인하는 사람의 정보를 볼 수 없어야  하므로 내용 비공개형인 POST를 사용합니다. 로그인 말고도 내용을 비공개하고 싶은 경우 POST를 사용하기도 합니다.
• target: action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 창에서 열도록 합니다. 예를 들어 팝업 폼의 경우 해당 팝업이 아닌 본 사이트에 적용하도록 하는 경우 사용합니다.
• accept-charset : 폼에 사용할 인코딩 문자를 선택합니다.

 

3. 폼 태그의 그룹 엘리먼트

<fieldset>, <legend>

<form action="" method="" target="" accept-charset="" name="">
    <fieldset>
        <legend>폼 그룹</legend>
        <input type="text" name="" id="">
        <input type="password" name="" id="">
    </fieldset>
</form>

 

• fieldset : 폼을 그룹으로 묶어줍니다.
• legend : 폼 그룹의 명을 표시합니다.

 

4. 폼 <INPUT> 태그

<type>, <name>, <readonly>, <maxlength>, <required>, <autofocus>, <placeholder>, <pattern>

1) TYPE의 종류들

<form action="" method="" target="" accept-charset="" name="">
    <fieldset>
        <legend>회원가입</legend>
        아이디 : <input type="text" name="" id=""><br>
        비밀번호 : <input type="password" name="" id=""><br>
        성별 : 남<input type="radio" name="" id=""> 여<input type="radio" name="" id=""><br>
        취미 : 축구<input type="checkbox" name="" id=""> 농구<input type="checkbox" name="" id=""> <br>
        제출 : <input type="submit" name="" id=""><br>
        리셋 : <input type="reset" name="" id="">
    </fieldset>
</form>

 

2) <INPUT>의 엘리먼트

• type : input 태그의 모양을 변화시켜줍니다. (text, password, radio, checkbox), 글을 제출합니다. (submit), 작성중이거나 작성된 내용을 초기화시킵니다. (reset)
• name : 해당 태그의 이름을 정합니다.
• readonly : 내용을 작성하지 못하도록 홀드 해당 태그를 홀드시킵니다.
• maxlength : 최대 작성 문자 갯수를 정합니다.
• required : 반드시 작성되어야하는 태그
• autofocus : 페이지 로드 시 자동으로 포커스
• placeholder : 태그의 보조 내용이 기재됩니다.
• pattern : 태그에 패턴을 부여합니다. ￦d{3}-￦d{4}￦-￦{4}
• title : 패턴에 맞지 않은 상태로 submit 시 표시됩니다. 010-0000-0000

폰번호 : <input type="text" name="phone_number" pattern="￦d{3}-￦d{4}￦-￦{4}" title="010-0000-0000"><br>

 

5. 폼 목록태그

<select>, <otpgroup>, <option>

<select>는 선택 그룹입니다. 선택그룹 안에서 추가로 그룹을 만들고 싶은 경우 <otpgroup>을 사용하여 추가그룹을 만들 수 있습니다.

<form action="" method="" target="" accept-charset="" name="">
    <select name="" id="">
        <optgroup label="서울">
            <option value="">강남</option>
            <option value="">강북</option>
        </optgroup>
        <optgroup label="경기">
            <option value="">인천</option>
            <option value="">김포</option>
        </optgroup>
    </select>
</form>

---

기존의 <select>는 하나만 선택이 가능했지만 <multiple> 옵션을 추가 해주면 여러개를 선택 할 수 있습니다.

<size>는 입력이 없을 시 기본은 4개를 표시하게 되어있으며 추가 입력 시 표시되는 갯수가 변경됩니다.

<form action="" method="" target="" accept-charset="" name="">
    <select name="city" id="" size="9" multiple>
        <option value="1">강남</option>
        <option value="2">강북</option>
        <option value="3">인천</option>
        <option value="4">김포</option>
    </select>
</form>

 

6. 폼 텍스트박스(여러줄 입력) <TEXTAREA>

<textarea>는 여러줄을 입력받는 폼 태그로 rows와 cols로 사이즈를 조정합니다.

• rows : 세로
• cols : 가로

<form action="" method="" target="" accept-charset="" name="">
    <textarea name="" id="" cols="30" rows="10"></textarea>
</form>

 

7. 폼 추가 된 유용한 기능

1) 텍스트 입력 값 후보 기능 - <datalist>

<input> 값에 list 옵션을 추가하여 list 옵션값과 datalist의 id값이 일치하면 작동하는 텍스트 입렵값 후보기능으로 사용법을 아시면 정말 유용하게 활용 가능합니다.

<form action="" method="" target="" accept-charset="" name="">
    <input type="text" name="browser" list="browser" id="">
    <datalist id="browser">
        <option value="구글">google</option>
        <option value="사파리">Apple</option>
        <option value="익스플로러">Microsoft</option>
    </datalist>
</form>

 

2) INPUT -> data, datatime

<form action="" method="" target="" accept-charset="" name="">
    <input type="date" name="" id="">
    <input type="time" name="" id="">
</form>

 

3) INPUT -> number, range

<form action="" method="" target="" accept-charset="" name="">
    <fieldset style="width:400px">
        <legend>number</legend>
        <input type="number" name="" id="" min="0" max="100" step="10">
    </fieldset>
    <fieldset style="width:400px">
        <legend>range</legend>
        <input type="range" name="" id="" min="0" max="100" step="10">
    </fieldset>
</form>

 

4) INPUT -> color

<form action="" method="" target="" accept-charset="" name="">
    <fieldset style="width:400px">
        <legend>color</legend>
        <input type="color">
    </fieldset>
</form>

---

5. 마무리 글 

디자인을 하기 위해서는 해당 기능을 작동하기 위한 틀이 필요합니다. FORM기능을 처음 보시는 분들은 많이 낮설게 느껴지시겠지만 사용하다보면 생각보다 금방 익혀지기 때문에 계속해서 사용해보세요.

폼 작동을 익히고 HTML기본 폼 태그들 보다 이쁜 디자인을 만들고 싶어지실 거에요.

기본 폼에서는 표현할 수 없는 것들이 생길 때면 왜 기본 폼으로는 표현을 할 수 없는지 생각을 하게되고 자연스레 폼에 대한 이해가 되기 시작할거에요.

 

다음에는 더욱 유용한 글로 찾아뵙겠습니다. 😁