<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폼 연습</title>
<style>
fieldset{ width:320px; background:yellowgreen; }
legend{ background:yellow; font-size:20px; color:blue; }
#s1 { background:pink; }
#s2 { background:yellow; }
</style>
</head>
<body>
<form action="ch.jsp" method="post">
<fieldset>
<legend>인적사항</legend>
이 름 <input type="text" size="10" maxlength="8"><br>
아 이 디 <input type="text" size="12" maxlength="10"><br>
비밀 번호 <input type="password" ><br>
주민 번호 <input type="text" size="7" maxlength="6">-<input type="password" size="7" maxlength="7"><br>
성 별 <label><input type="radio" name="ss">여자</label>
<label><input type="radio" name="ss">남자</label>
<label><input type="radio" name="ss">기타</label><br>
사용 언어 <label><input type="checkbox" name="kk">한글</label>
<label><input type="checkbox" name="kk">영어</label>
<label><input type="checkbox" name="kk">독어</label>
<label><input type="checkbox" name="kk">일어</label><br>
국 적
<select>
<option>한국</option>
<option>미국</option>
<option>중국</option>
<option>태국</option>
</select><br>
취 미
<select multiple="multiple">
<option>요가</option>
<option>영화</option>
<option>러닝</option>
<option>테니스</option>
</select><br>
</fieldset><br>
<input type="submit" value="제출" id="s1">
<input type="reset" value="취소" id="s2">
</form>
</body>
</html>
이 태그들을 불러오면 이런 모습이다
<form>
태그를 이용해서 만든 페이지. 주로 회원가입 할 때 입력하는 회원정보 페이지 라고 할 수 있다. 아직 데이터베이스에 저장하는 기능은 없다. 그 말인즉슨 내가 무엇을 입력하고 선택했는지 컴퓨터는 알 길이 없다. 이 때 필요한 게 자바스크립트나 제이쿼리 등과 같은 언어인데 지금은 프론트엔드쪽만 배우기 때문에 이정도로 만족해야한다.
<form action="ch.jsp" method="post">
action은 어디로 보낼 건지 지정한다. method는 어떤 방식으로 보낼 것이냐 지정한다. 자주 쓰이는 방식은 get/post이고 이 라인은 아직 선언만 해주고 배우지는 않았음
<fieldset> 폼을 감싸주는 박스
<legend> 박스의 제목 - 옵션 : font-size 폰트 크기 조절 / 일반 size와는 다르다
<input> 태그는 말 그대로 정보를 입력하거나 선택할 수 있다는 뜻이다.
<input type="" name="" size="" maxlenth=""> type은 어떤 식으로 입력할 건지 지정한다. 종류에는 text, password(암호화), radio(단일 선택), checkbox(다중 선택), submit(제출), reset(취소)등이 있다. name 그룹 설정. radio에서는 무조건 하나의 그룹으로 묶어야 하지만 checkbox는 그룹으로 묶지 않아도 된다. 하지만 자바스크립트에서 쉽게 그룹을 읽어들이려면 그룹으로 묶는 게 좋다. size 눈에 보이는 칸의 사이즈. maxlength 입력 받을 수 있는 크기
<label> radio / checkbox 체크시 크기가 작아서 선택하기 어려울 때, 글씨만 눌러도 선택 가능하도록 도와주는 서비스다.
<select> 값을 받는 게 아니라 선택할 수 있도록 한다.
<option> 선택할 수 있는 값들
띄어쓰기를 다중으로 입력 했을 때 결과페이지에서는 한 칸만 띄어진다. 그럴 때 수동으로 이 값을 입력해주면 여러번 띄어쓰기를 할 수 있다. (=blank 하나짜리)
그 밖에도 ···
<br>을 입력하지 않았는데 다음줄로 이동하는 특징이 있는 것은 inline 성질을 갖고 있다.
px : pixel 해상도. 화면에 나타나는 작은 점. 이것이 모여서 화면/해상도가 된다.
'개발일지 > Front' 카테고리의 다른 글
| html 파일 frame 영역에 불러오기(src), 주석 (0) | 2021.09.03 |
|---|---|
| 클래스 선언과 화면 나누기 (0) | 2021.09.02 |
| css 파일 불러오기(link,import) (0) | 2021.09.02 |
| 03. 다양한 frmae 태그활용하기(화면나누기, 프레임 안에서 페이지 띄우기) (0) | 2021.09.01 |
| 01. html, css의 기본구성 & table태그 (0) | 2021.08.31 |
