입력 양식은 사용자에게 정보를 입력받는 공간을 말하며 입력 양식 태그를 사용해 만듭니다.
일반적으로 서버에서 클라이언트로 데이터가 전달 됩니다.
하지만 회원가입과 로그인, 검색과 관련된 버튼을 클릭하는 순간에는 클라이언트가 서버로 데이터를 보내야 합니다.
입력 양식을 사용하는 것은 클라이언트가 서버로 데이터를 보내는 가장 기본적인 방법입니다.
1. 입력 양식 태그 <form>
1.1 속성
1.1.1 전송 위치 ( 데이터 전달 목적지 ) : action
1.1.2 전송 방식 : method
1.1.2.1 주소에 데이터를 직접 입력해 전달 : GET
1.1.2.2 별도의 방법을 사용해 데이터를 해당 주소로 전달 : POST
1.2 사용자 입력 부분 <input>> ( 인라인 태그 )
1.2.1 글자 입력 양식 : text
1.2.2 버튼 : button
1.2.3 체크 박스 : checkbox
1.2.4 파일 입력 양식 : file
1.2.5 해당 내용 표시 안 함 : hidden
1.2.6 이미지 형태 : image
1.2.7 비밀번호 입력 양식 : password
1.2.8 라디오 버튼 : radio ( name 속성으로 묶어 준다. )
1.2.9 초기화 버튼 생성 : reset
1.2.10 제출 버튼 생성 : submit ( 지정된 방법과 지정된 장소로 데이터 전달 : form action과 method )
1.3 여러 행의 글자 입력 <textarea> ( 주의사항 : 보기 편하게 하기 위해 태그 뒤 문장 띄어쓰기 하지말것 )
1.3.1 너비 : cols
1.3.2 높이 : rows
1.4 선택 양식 <select>
1.4.1 중복 선택 : multiple
1.5 옵션 그룹화 <optgroup>
1.6 옵션 생성 <option>
1.7 입력 양식의 그룹 지정 <fieldset>
1.8 입력 양식 그룹의 이름 지정 <legend>
1.9 이름표 <label for="input 태그의 id 입력"> </label>
2. 그 외
2.1 태그 고유의 값 ( 중복 불가능 ) : id
2.2 태그 값 ( 중복 가능 ), 서버로 전달 되는 값 : name
2.3 입력 태그의 초기 설정 값 ( 사용자가 수정 가능 ) : value
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html> <html> <head> <title> DODAM </title> </head> <body> <form> <fieldset> <legend> Sign up form </legend> <table> <tr> <td> <label for="id"> id </label> </td> <td> <input id="id" type="text"> </input></td> </td> <tr> <td> <label for="pw"> pw </label> </td> <td> <input id="pw" type="password"></input></td> </tr> <tr> <td> 성별 </td> <td> <input id="man" type="radio" name="gender" value="남"> <label for="man"> 남 </label> <input id="woman" type="radio" name="gender" value="여"> <label for="woman"> 여 </label></td> </tr> <tr> <td> 취미 </td> <td> <input type="checkbox" name="hobby" value="music"></input> 음악 <input type="checkbox" name="hobby" value="movie"></input> 영화 <input type="checkbox" name="hobby" value="game"></input> 게임 </td> </tr> <tr> <td> <input type="submit" value="sign in"> </input> </td> </tr> </table> </fieldset> </form> </body> </html> | cs |
'웹 프로그래밍' 카테고리의 다른 글
| CSS 선택자 (0) | 2018.05.04 |
|---|---|
| CSS 내부 스타일시트, 외부 스타일 시트 (1) | 2018.05.04 |
| HTML 멀티미디어 태그와 입력 양식 태그 (0) | 2018.04.15 |
| HTML 기본 태그 (0) | 2018.04.15 |
| HTML 기본 구조와 작성법 (0) | 2018.04.13 |