HTMl 수업3일차 내용 정리 (2)

한 페이지에 다 정리 하고자 하였으나 너무 긴 글은 읽기 싫기에 나눠서 올리고자 한다.

HTML 입력양식
입력양식(from)

사용자로부터 데이터를 받기위한 것

<form>

  <form action="서버스크립트주소" method="입력데이터양식 get과 post"></form>
    <input type="text" name="input">
    <input type="submit">
j

입력데이터양식 get과post

<get>url주소뒤에 파라미터양식을 붙여서 넣는다.

네이버를 들어가보면 ?앞이 URL주소이고 뒤가 파라미터입니다.

길이제한이있다.

<post> 사용자가 입력한데이터를 url 주소에 붙이지 않고 HTTP Request 헤더에 포함시켜 전송한다.

길이제한이없다.



입력태그#1
<from>요소

<input> type 속성을 변경하여 다양하게 형태변환가능

이메일 : type="email" name="button1"

url : type="url" name="button1"

전화번호 : type="tel" name="button1"

색상 : type="color" name="button1"

월 : type="month" name="button1"

날짜 : type="date" name="button1"

주 : type="month" name="button1"

시간 : type="time" name="button1"

지역시간 : type="datetime-local" name="button1"

숫자 : type="number" name="button1"

범위 : type="range" name="button1"

아이디 : type="text" name="button1"

패스워드 : type="password" name="button1"

버튼 : type="range" name="button1"

체크박스 : type="checkbox" name="button1"

파일 : type="file" name="button1"

리셋버튼 : type="reset" name="button1"

이미지전송버튼 : type="img" name="button1"

라디오 : type="radio" name="button1"

히든 : type="hidden" name="button1"(사용자에겐 보이지않지만 서버로 전송됨)
required= 필수입력하게 하는 태그
placeholder=텍트스창에 글씨 표시 
예. 아이디를 입력하시오.

구조설명을 하자면 type는 입력필드 종류,value는 버튼에 나타내는 텍스트,name는 서버로 전달 되는 이름이다

뜬금없이 value 가 나오는건 우리가 네이버에 아이디 입력을 할때 입력창에 생기는 아이디를 입력해주시오 같은 글씨를 표현 할 수 있다. 또한 버튼에도 글씨를 넣을 수 있다.

value의 첫 번째 기능은 초깃값 설정입니다. text나 password 태그 조합에서 초기 글자를 미리 입력해둘 수 있습니다.

value 속성의 단점은 초깃값을 사용자가 지우고 입력해야 한다는 점입니다. placeholder 속성을 사용하면 초깃값을 자동 삭제하도록 설정할 수 있습니다.

<form action="">

<input type="text" placeholder="아이디를 입력하세요."> <br> <input type="password" placeholder="비밀번호를 입력하세요."> </form>



입력태그#2
<textarea>

textarea는 여러 줄의 긴 문장을 입력할 수 있는 양식이다.

<form>
<p><textarea cols="50" rows="10"></textarea></p>
</form>
rows와cols로 영역크기지정가능

<select>

옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)를 정의할 때 사용합니다.

<select>    

<option value="americano">아메리카노</option>  

<option value="caffe latte">카페라테</option>    

<option value="cafe au lait">카페오레</option>    

<option value="espresso">에스프레소</option>

</select>

<fieldset>

<form> 요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용합니다.

<fieldset>        

<legend>학사 관리 로그인</legend>        

이름 : <input type="text" name="st_name"><br>        

학번 : <input type="text" name="st_id"><br>        

학과 : <input type="text" name="department"><br>        

<button type="submit">제출하기</button>

</fieldset>

<label>

사용자 인터페이스(UI) 요소의 라벨(label)을 정의할 때 사용합니다.

<form action="/examples/media/action_target.php" method="get">

    여러분의 나이대를 골라보세요.<br>

    <input type="radio" name="ages" id="teen" value="teenage">

    <label for="teen">10대</label><br>

    <input type="radio" name="ages" id="twenty" value="twenties">

    <label for="twenty">20대</label><br>

    <input type="radio" name="ages" id="thirty" value="thirties">

    <label for="thirty">30대</label><br>

    <input type="radio" name="ages" id="forty" value="forties">

    <label for="forty">40대 이상</label><br>

    <input type="submit"> </form>
이 밖에도 html5에 추가된 태그가 더 있으나 필요할때 더 알아보도록 하겠습니다.

사실 좀 피곤함..