반응형
Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
Tags
- insert 중복방지
- 스프링프로젝트
- 게시판상세보기
- double-submit
- 자바스크립트
- 스프링게시판insert
- 한글깨짐해결방법
- dataSource설정
- 컨트롤러url
- 스프링게시판등록
- 스프링게시판상세보기
- 이클립스db연결
- 게시판목록조회
- HTML
- 톰캣9.0다운로드
- 스프링게시판만들기
- insert할글깨짐
- 게시판만들기
- oracle
- 이클립스데이터베이스연결
- mysqlinsert한글깨짐
- 스프링게시판목록조회
- 저장할때한글깨짐
- Java
- url설정
- mybatis연결
- 전자정부프레임워크 double-submit
- Could not create the java Virtual Machine
- 톰캣시작페이지설정
- 게시판insert
Archives
- Today
- Total
하루의 일상💜
[HTML] 회원가입 입력 창 만들기 본문
반응형
<form> 태그란
웹 페이지 내에서 사용자로 부터 입력을 받을 때 사용하는 태그이다.
사용자가 입력한 데이터를 다른 페이지로 전송할 때 form 태그를 사용한다.
아이디 비밀번호 입력 창
<p>
아이디<input type="text" placeholder="아이디를 입력해 주세요." name="userId" required>
</p>
<p>
비밀번호<input type="password" placeholder="비밀번호를 입력해주세요." name="userPassword">
</p>입력받기 위해 사용하는 태그인 <input> 을 이용하여
type : 입력 종류를 설정
placeholder : 미리 출력해줄 문구를 작성
name : value의 key값
required : 필수 항목 //아이디를 쓰지 않고 가입버튼을 눌렀을 때 필수로 입력해야한다는 안내 문구가 나온다.
그 외에도 <input> 태그에서 사용할 수 있는 속성에 대해서 아래와 같은 태그 들이 있다.
value : 사용자가 입력한 값(입력 전 미리 값을 넣어줄 수도 있다.)
readonly : 수정할 수 없도록 하는 설정
maxlength : 글자 수 제한
<fieldset> 태그로 성별 선택 창 만들기
관련있는 폼 필드를 세트로 표시하는 것으로 목록을 선택할때 사용된다.
<fieldset style="width: 40%">
<legend>성별</legend>
<p>
<input type="radio" name="gender" value="none">선택안함
<input type="radio" name="gender" value="w">여자
<input type="radio" name="gender" value="m">남자
</p>
</fieldset><legeng>태그는 해당 <fieldset> 요소의 제목을 표시할 때 사용한다.
성별의 경우 한가지만 선택해야 하므로 type을 radio로 선택해야 한다.
<fieldset> 태그로 여러 선택 창 만들기
radio와 다르게 여러 항목을 선택해야 할때 사용하는 태그로는 checkbox가 있다.
<fieldset style="width: 40%">
<legend>취미</legend>
<p>
<input type="checkbox" name="hobby" value="독서">독서
<input type="checkbox" name="hobby" value="요리">요리
<input type="checkbox" name="hobby" value="운동">운동
<input type="checkbox" name="hobby" value="여행">여행
</p>
</fieldset>
<fieldset> 태그로 목록창 만들기
<p>
상품선택
<select name="choice">
<option value="">쌀 3kg</option>
<option value="">보리 3kg</option>
<option value="">잡곡 3kg</option>
</select>
</p>
첨부파일 & 가입완료 버튼 만들기
<p>
첨부파일<input type="file">
</p>
<p>
<input type="submit" value="가입 완료">
</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
<p>
아이디<input type="text" placeholder="아이디를 입력해 주세요." name="userId" required>
</p>
<p>
비밀번호<input type="password" placeholder="비밀번호를 입력해주세요." name="userPassword">
</p>
<fieldset style="width: 40%">
<legend>성별</legend>
<p>
<input type="radio" name="gender" value="none">선택안함
<input type="radio" name="gender" value="w">여자
<input type="radio" name="gender" value="m">남자
</p>
</fieldset>
<fieldset style="width: 40%">
<legend>취미</legend>
<p>
<input type="checkbox" name="hobby" value="독서">독서
<input type="checkbox" name="hobby" value="요리">요리
<input type="checkbox" name="hobby" value="운동">운동
<input type="checkbox" name="hobby" value="여행">여행
</p>
</fieldset>
<p>
상품선택
<select name="choice">
<option value="">쌀 3kg</option>
<option value="">보리 3kg</option>
<option value="">잡곡 3kg</option>
</select>
</p>
<p>
첨부파일<input type="file">
</p>
<p>
<input type="submit" value="가입 완료">
</p>
</form>
</body>
</html>
반응형
'HTML' 카테고리의 다른 글
| [HTML] HTML 요소의 종류(display) (0) | 2022.09.17 |
|---|---|
| [HTML] 테이블 태그 표 만들기, 행과 열 합치기 (0) | 2022.09.17 |
| [HTML] 리스트 태그 작성하기, type 값 변경하기 (0) | 2022.09.17 |
| [HTML] 웹 문서에 다양한 서식 태그 입력하기 (0) | 2022.09.17 |
'HTML' Related Articles
more
