HTML5+CSS - form

form & action

 

코드구현

<form action="" method="">
        id:<input type="date" name="" id=""><br>
        가입일: <input type="date" name="" id=""><br>
        email: <input type="email" name="" id=""><br>
        <input type="submit" value="전송하기">
        <button type="submit">전송하기</button>
    </form>
        form 태그 내부의 type="submit"을 갖고 있는 element들을 클릭을 하면 <br>
        해당 form의 action 속성 값의 주소로 데이터를 전송하면서 이동하게 됨
    <hr>
    <form action="01_getDatas.html" method="post">
        id: <input type="text" name="userid" id=""><br>
        pwd: <input type="password" name="userpw" id="">
        <button type="submit">로그인</button>
    </form>
    action 속성 값을 생략하면? 현재 페이지로 데이터 전송한 후 재로딩

 

 

실행화면

 

 

버튼에 텍스트 입력

 

코드구현

<form action="">
        <div>
            <label for="a">일반 텍스트 입력</label><br>
            <input type="text" name="" id="a">
        </div>
        <div>
            <label for="b">텍스트 입력 길이 속성: </label><br>
            <input type="text" maxlenth="5">
             <!-- maxlength 텍스트 입력의 글자수 제한 -->
        </div>
        <div>
            <label for="b">텍스트 입력 길이 속성: </label><br>
            <input type="text" maxlenth="5" readonly>
            <!-- readonly입력시 입력이 되지 않는다 -->
        </div>
        <div>
            <label for="">입력창 기능 제한 속성: </label><br>
            <input type="text" maxlenth="5" name="uid" disabled>
            <!-- disabled를 쓰게되면 입력창 기능자체가 제한된다. -->
        </div>
        <div>
            <label for="">입력 텍스트 규칙 설정</label><br>
            <input type="text" pattern="정규식">
        </div>
    </form>
    <h3>*readonly 속성이 적용된 데이터는 전송가능</h3>
    <h3>*disabled 속성이 적용된 데이터는 전송 불가능</h3>

<div>

     <label for=" "> </label>

     <input type=" " name="" id="" pattern="">

</div>

 

 

 

실행화면

 

• readonly입력시 입력이 되지 않음 (전송가능)
• disabled 입력시 입력창 기능자체가 제한됨 (전송불가능)

 

 

 

패스워드 입력

password 속성은 일반텍스트와 비슷하지만 입력텍스트를 보여주지 않는 기능, 하지만 소스코드에서는 보임

 

 

코드구현

<form action="">
        <div>
            <label for="pwd">Password: </label><br>
            <input type="password" name="pwd" id="pwd" value="dbsghk825" pattern="정규식">
            <!-- value는 전 input속성의 모든 공통 속성이다 -->
            <!-- value는 입력텍스트에서 사전에 값을 미리 넣어줌 -->
                
        </div>
        <div>
            <label for="pwd">Password: </label><br>
            <input type="password" name="pwd" id="pwd" value="dbsghk825" maxlength="5">
        </div>
        <div>
            <label for="a">입반텍스트: </label><br>
            <input type="text" name="a" id="a" value="dbsghk825">
            <!-- input 뒤 type이 text이므로 일반 텍스트/ password일 경우 ***로 표현된다 -->
        </div>
        
    </form>

 

 

숫자 입력

숫자만 입력이 가능한 타입, 증감 클릭 기능 제공

 

 

코드구현

<form action="">
        <div>
            <label for="n1">숫자 입력 란: </label>
            <input type="number" name="" id="n1" value="1234">
        </div>
        <div>
            <label for="n2">숫자 입력 란2: </label>
            <input type="number" name="" id="n2" readonly value="1234">
        </div>
        <div>
            <label for="n3">숫자 입력 란3: </label>
            <input type="number" name="" id="n2" max="1000" min="0">
        </div>
        <button type="submit">전송</button>
    </form>

*사용자가 임의의 데이터 입력은 가능하나 전송시 유효성 검사에 속성기능이 모두 제한*

 

 

실행화면

 

이메일 전화번호 입력

이메일과 전화번호 입력만을 허용하는 입력란

 

 

코드구현

 <form action="">
        <div>
            <label for="email">Email: </label>
            <input type="email" name="" id="email" pattern="정규식">
        </div>
        <div>
            <label for="tel">Tel: </label>
            <input type="tel" name="" id="tel" pattern="정규식">
        </div>
        <button type="submit">전송</button>
    </form>

 

 

실행화면

 

* 강력한 형식제한 기능은 없음

* 전송버튼을 클릭하면 유효성 검사를 한다.

* 주로 pattern 속성에 정규식을 통해 강력한 형식제한을 구현

 

 

 

버튼

버튼속성은 클릭 이벤트를 발생시킬 수 있다

 

 

ID에 1234를 입력시:

* 두번째 전송버튼을 누르면 데이터가 전송된것을 확인할 수 있다.

 

 

코드구현

<form action="">
        <div>
            ID: <input type="text" name="uid" id=""><br>
            PW: <input type="password"><br>
            Email: <input type="email"><br>
            Date: <input type="date"><br>
            Range: <input type="range"><br>
        </div>
        <!-- type이 button인 경우는 그냥 버튼 모양만 제공한다 -->
        <button type="button">일반버튼</button>
        <button type="submit">전송버튼</button>
        <button type="reset">리셋버튼</button><br>
        <input type="button" value="일반버튼">
        <input type="submit" value="전송버튼">
        <input type="reset" value="취소버튼">
    </form>

! button type 태그는 일반 버튼 모양만 제공할뿐임

 

 

파일 전송

• 파일 타입은 일반 input과 속성이 다름
• 파일 첨부 윈도우(팝업창)은 html에서 제공하는 고유 기능(수정불가)
• 파일이 첨부된 form은 enctype의 값이 multipart/form-data를 지정해야함
• 파일전송은 반드시 post방식으로 전송해야 한다

 

 

코드구현

<form action="" method="post" enctype="multipart/form-data">
        <div>
            <label for="files">File Attach: </label><br>
            <input type="file" name="myFile" id="files">
        </div>
        <div>
            <label for="files">File Attach: </label><br>
            <input type="file" name="myFile" id="files2" multiple>
        </div>
        <button type="submit">파일전송</button>
    </form>

 

 

실행화면

 

* 첫번째 파일 선택에는 하나의 파일만 선택가능하나 두번째 file attach에는 2개의 파일선택이 가능하다.

 

 

hidden

<form action="">
        <input type="hidden" name="">
                <!-- input이 총 세개인데 type hidden으로 했으므로 보이지 않는다! -->

        ID: <input type="text" name="uid"><br>
        PW: <input type="password" name="pwd"><br>
        <button type="submit">데이터 전송</button>
    </form>

 

 

* input 코드를 세개 작성했으나 hidden으로 type설정한 부분은 입력창이 나타나지 않았다

 

 

radio버튼

선택하는 형식의 input, 단일선택은 radio, 다중선택은 checkbox를 활용

 

 

코드구현

 <form action="">
        <div>
            <h4>내가 좋아하는 것</h4>
            <input type="radio" name="favor" id="movie">
            <label type="movie">애니</label><br>
            <input type="radio" name="favor" id="music">
            <label type="music">음악</label><br>
            <input type="radio" name="favor" id="dance">
            <label type="dance">나</label><br>
            <!-- 단일 선택을 묶어주는 것은 name이다-->
            <!-- favor을 favors로 바꾸면 다중선택 가능해진다 -->
            <button type="submit">전송</button>
        </div>
    </form>

* 실질적 값은 value, 데이터값을 전송해주는 값은 label이다

 

 

 

실행화면

 

 

 

 

체크박스

checkbox는 name 값이 같은 것중 다중선택, 전송되는 데이터 역시 value의 값, 단 같은 name에 value가 여러개가 될 수있기 때문에 서버측에서 전송받을 때 집합형태(배열, 리스트)형식으로 받아야됨

 

코드구현

<form action="">
        <input type="checkbox" name="hunter" id="bb" value="키르아" required>
        <label for="bb">키르아</label><br>
        <input type="checkbox" name="hunter" id="bb" value="이르미" required>
        <label for="bb">이르미</label><br>
        <input type="checkbox" name="hunter" id="bb" value="곤" required>
        <label for="bb">곤</label><br>
        <input type="checkbox" name="hunter" id="bb" value="히소카" required>
        <label for="bb">히소카</label><br>
        <button type="submit">전송</button>
    </form>

 

 

textarea

 

<label for="content">상세내용: </label>
            <textarea name="content" id="content" cols="30" rows="10">
            이곳이 value영역
            </textarea>

**시작태그와 마감태그 사이의 빈공간도 value값으로 인식하므로 띄어쓰기 및 빈공간 생성에 유의**

 

 

실행화면

*네모창 사이즈 늘리기 가능

=> 스타일링은 css 영역에서 할 것, value영역에 어떠한 값이 있으면 placeholder 적용이 되지 않는다

 

 

value에 아무런 값도 존재하지 않을때

 

코드구현

   ⬇⬇⬇

<label for="content">상세내용: </label>
<textarea name="content" id="content" cols="30" rows="10" placeholder="플레이스홀더된당*^^*"></textarea>

 

 

select

규정되어 있는 값을 선택하도록 유도하는 형식

 

<label for="cp">통신사 선택</label>
        <select name="company" id="cp">
            <option value="">선택하세요</option>
            <option value="SKT">SKT</option>
            <option value="KT">KT</option>
            <option value="U+">U+</option>
            <option value="알뜰폰">알뜰폰</option>
            <option value="폰없엉ㅡㅡ">폰없엉ㅡㅡ</option>
        </select>
        <button type="submit">선택완료</button>

 

결과화면

*폰없엉ㅡㅡ 선택시: 주소에 company=폰없엉ㅡㅡ 이 입력되어 있는것을 확인할 수 있다*

  ⬇⬇⬇