3일차 Form 태그

Maryland_09 2020. 10. 26. 15:12

728x90

<form action="#" method="get">

<action>

제출, 로그인 등 작성한 form의 정보를 어디론가 보내야 하는데, 보낼 장소(서버)의 주소를 입력하는 곳이다.

<method>

get- 정보가 가는 방식. 정보가 검색되었을 때, 도메인 주소 옆에 URL에 길게 주소로 나열되는 방식.

post- 정보가 가는 방식. 정보가 암호화 되어 헤더에 전송이 된다. (정보 은닉)

입력을 하지 않으면 기본값(default)은 get방식이 된다

<input>

각 항목을 작성하기 위한 태그로서, 아래의 속성들과 함께 사용한다.

type : 어떠한 형태로 쓰는가
문자일 경우 "text" / 비밀번호 형태(보안문자) "password"
name: input 하나의 이름이다. 나중에 서버에 갔을 때 사용자가 입력한 해당 값을 호출하여 알아낼 수 있다.
size: 상자의 가로 폭
file: 사진이나 문서 등 파일을 선택할 수 있는 대화상자
radio: 하나만 선택해야 할 때 쓴다. 성별처럼 양자택일 해야 하는 경우, name 값이 두 개의 선택값과 같아야 한다. 하지만 value값을 다르게 하면 된다.
<input type="radio" name="gender" value="m"> 남
<input type="radio" name="gender" value="w"> 여 <br />
checkbox: 체크박스를 만들어 주는 태그
checked: 해당 페이지를 열었을 때 기본적으로 체크 되어있게 만들어 주는 태그

<textarea>

글상자를 만드는 태그.

rows: 줄 수를 설정한다.

cols: 글자 수를 설정한다.

<select>

선택지를 만들 때 사용하며, 아래의 태그로 선택지를 설정한다.

option 선택지를 만든다.
multiple 여러 개를 선택할 수 있게 만들기 위해서 사용한다.

실습화면

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <form action="#" method="get">
      이름: <input type="text" name="uname" /><br />
      아이디: <input type="text" name="uid" /><br />
      비밀번호: <input type="password" name="upw" /><br />
      연락처: <input type="text" name="uphone1" size="5"> - <input type="text" name="uphone2" size="5"> - <input type="text" name="uphone3" size="5"><br />
      사진: <input type="file" name="upic"/><br />
      성별구분: <input type="radio" name="gender" value="m"> 남 
      <input type="radio" name="gender" value="w">여 <br />
      사용언어: <input type="checkbox" name="ian" value="kor" checked="checked" /> 한국어
      <input type="checkbox" name="ian" value="eng" /> 영어
      <input type="checkbox" name="ian" value="jap" /> 일어
      <input type="checkbox" name="ian" value="chi" /> 중국어<br />
      자기소개 : <textarea rows="5" cols="20"> 간단하게 입력하세요. </textarea> <br />
      국적: 
      <select>
        <option>Kroea</option>
        <option>USA</option>
        <option>CHINA</option>
        <option>JAPAN</option>
        </select><br />
      좋아하는 음식: 
      <select multiple="multiple">
        <option>김치</option>
        <option>비빔밥</option>
        <option>치킨</option>
        <option>파전</option>
        <option>닭갈비</option>
        </select><br />
      <input type="submit"/>
    </form>
  </body>
</html>

결과 화면

728x90

저작자표시 비영리 변경금지 (새창열림)