41일차[HTML/CSS] FORM,INPUT,SELECT,OPTION태그

<from> 태그란?

form 태그는 웹 페이지에서의 입력 양식을 의미합니다.

예를 들어 로그인 창, 회원가입 창이 이에 해당됩니다.

텍스트 필드에 글자를 입력하거나, 체크박스나 라디오 버튼을 클릭하고 제출 버튼을 누르면 백엔드 서버에 양식이 전달되어 정보를 처리하게 됩니다.

<form> 태그 속성

• name : 폼의 이름을 정할 수 있습니다.
• action : 폼 데이터가 전송되는 백엔드의 url을 정할 수 있습니다.
• accept-charset : 폼 전송에 사용할 문자 인코딩을 지정합니다.
• target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정할 수 있습니다.
• method:폼을 서버에 전송할 http 메소드를 정합니다.(GET, POST)

FORM을 구성하는 태그들

{<INPUT> 태그}

input 태그는 사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들 수 있습니다.

input태그의 속성

• type : 태그 모양을 다양하게 변경할 수 있습니다.
  • text : 텍스트를 입력하는 창을 생성
  • radio : 라디오 버튼을 생성
  • checkbox : 체크 박스를 생성
  • password : 비밀번호를 입력하는 창을 생성
  • button :일반 버튼을 생성
  • hidden : 사용자에게 보이지는 않지만 서버로 전송됨
  • fileupload : 파일 이름을 입력하는 창을 생성
  • submit : 서버로 제출/ 전송하는 버튼을 만듭니다.
• name : 태그 이름을 지정합니다.
• readonly : 태그를 읽기 전용으로 합니다.
• maxlength : 해당 태그 최대 글자 수를 지정합니다.
• required : 해당 태그가 필수 태그로 지정됩니다. 필수 태그를 입력하지 않고, submit버튼을 누르면 에러 메시지가 웹 브라우저에 출력됨
• autofocus : 웹 페이지가 로딩되자마자 이 속성을 지정한 태그로 포커스가 이동됩니다.
• placeholder : 태그에 입력할 값에 대한 힌트를 줍니다.
• pattern : 정규표현식을 사용하여 특정 범위 내의 유효한 값을 입력받을 때 사용합니다.

---

input태그 사용해 보기

[text속성값 사용해 보기]

<form>
        placeholder<input type="text" name="name" placeholder="아이디를 입력하세요!"> <br>
       value <input type="text" name="name"value="기본으로 설정한 값입니다.">         
 </form>

실행

텍스트 속성값을 사용해 봤습니다. 해당 텍스트 박스에 텍스트를 입력할 수 있습니다.

placeholder와 value 속성을 사용해 봤는데

placeholder는 위의 실행창처럼 힌트를 줄 수 있습니다.

value는 미리 지정한 값을 기본적으로 텍스트 박스에 입력되어 있게 할 수 있습니다.

[password 속성값 사용해 보기]

<form>
        placeholder<input type="password" name="name" placeholder="비밀번호를 입력하세요!"> <br>
       value <input type="password" name="name"value="기본으로 설정한 값입니다.">         
</form>

실행

[radio 속성값 사용해 보기]

<form>
        10대<input type="radio" name="age" value="10"> <br>
        20대<input type="radio" name="age"  value="20"><br>
        30대<input type="radio" name="age"  value="30"><br>
        40대<input type="radio" name="age"  value="40" checked> <br>
    </form>

실행

위와 같이 radio 버튼을 생성할 수 있습니다

radio 버튼은 value값과 name값을 지정해주어야 합니다.

name은 동일한 이름으로 넣어주어야지 같은 그룹으로 인식됩니다.

checked 속성은 웹 브라우저 출력 시 라디오 버튼이 어느 부분에 먼저 체크를 해놓는가를 설정할 수 있습니다.

submit, reset 사용해 보기

<form name="input" action="">
        아이디를 입력하세요 :<input type="text"> <br>
        <input type="submit" value="제출">
        <input type="reset" value="초기화">
    </form>

실행

form태그의 action 속성에는 데이터가 전송될 스크립트 파일을 지정할 수 있습니다.

submit속성 값을 사용한 뒤 해당 버튼을 클릭하면 form 태그에 지정된 방식으로 스크립트 페이지로 보내지게 됩니다.

reset 속성 값을 사용한 버튼을 클릭하면 텍스트에 입력된 양식이 모두 초기화되어 버립니다.

submit이 아닌 일반 button 만들어보기

<input type="button" value="일반 버튼입니다.">
      <button>일반 버튼입니다.</button>

submit버튼이 아닌 일반 버튼은 input태그의 type속성을 사용하여 만들 수도 있고

<button> 태그를 사용하여 만들 수 있습니다.

---

<select> 태그

select태그는 항목을 선택할 수 있는 태그입니다.

속성 중에 size와 multiple 속성이 있습니다.

size : 한 번에 표시할 항목수를 의미합니다.

multiple : 다중 선택을 허용할 것인지를 지정하는 속성입니다.

<option>

option태그는 select태그의 하위 태그입니다.

option 태그는 목록을 나타내는 태그입니다.

select, option태그 사용해 보기

	<select>
            <option>토트넘</option>
            <option>맨유</option>
            <option>맨시티</option>
            <option>뉴캐슬</option>
            <option>아스날</option>
        </select>

실행