HTML Forms

cy8erpsycho·2023년 7월 8일
0

HTML

목록 보기
6/11
post-thumbnail

HTML Forms


HTML <form>은 유저의 입력을 수집하는 데 쓰이고
대부분 서버 상으로 전송된다.

<form> 요소

<form> 요소는 유저의 다양한 입력을 받는 <input> 요소를 위한
컨테이너라고 생각하면 된다.
<form>요소내 <button>은 자동으로 서버에 데이터를 보낸다.

<input> 요소

<input type="text">

말 그대로 텍스트를 입력하는 한줄의 필드이다. type 속성이 생략되었을 경우, 기본적으로 type="text"로 처리된다 . 예를 들면, <input name="query"><input type="text" name="query">는 동일한 의미를 갖는다

<label>
    <span>아이디:</span>
    <input type="text" 
           name="t" 
           maxlength="5"                     
           placeholder="아이디를 입력하세요"
           style="width:100px;"
           required="required;"  
           ><br>
</label>

<input type="radio">

radio는 유저가 항목을 단일선택할 때 유용하게 쓰일 수 있다.
radio가 같은 그룹이라면 name 속성이 같아야한다.

<fieldset>
    <legend>단일선택하세요</legend>
    <input type="radio"         name="r" value="r1">ONE
    <input type="radio" checked name="r" value="r1">TWO
    <input type="radio"         name="r" value="r1">THREE<br>
</fieldset>

<input type="checkbox">

checkbox는 유저가 항목을 다중선택할 때 유용하게 쓰일 수 있다

<fieldset>
    <legend>언어를 선택하세요</legend>
    <input type="checkbox" checked name="c" value="j">JAVA
    <input type="checkbox"         name="c" value="s">SQL
    <input type="checkbox" checked name="c" value="h">HTML
</fieldset>


<lavel> : lavel내에 어느 영역이라도 클릭하면 포커스가 input태그로 이동

<input type="submit">

<input type="submit">

<input type="button">

<input type="button">

<input type="hidden">

서버로 전달하지만 화면에는 출력되지 않는다

<input type="hidden" name="h" value="hdefault">

<input>의 name 속성

다음의 코드는 네이버의 검색창으로 입력한 값을 전달하는 코드이다.
하지만 만약 <input>에서 name 속성이 생략되어 있으면 값을 전달하지 못한다. 즉, <input> 필드가 제출 되기 위해선 반드시 name 속성이 지정되어 있어야 한다.

<form method="get" action="https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8">
    <input name="query">
    <button>전송</button>
</form>
전송

<label> 요소

<lavel>요소에서 <lavel>내에 어느 영역이라도 클릭하면 포커스가 <input> 요소로 이동하게 된다. 이는 라디오 버튼이나 체크박스 등에서 작은 영역을 클릭하는데에 어려움을 겪고 있는 사용자에게 유용하게 쓰일 수 있다. 또한 <label>요소는 스크린리더 사용자에게도 유용하다. because screen-reader will read out loud the labe when the user focuses on the input element.

0개의 댓글