ABOUT ME

    -
    • HTML - form 관련 태그 / 파일 태그
      프로그래밍/HTML & CSS 2021. 9. 16.
      반응형

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
function send() {
	var f = document.myForm;
	var s = "환영합니다.";
	
	s = "아이디 : " + f.id.value;
	s += "\n이름 : " + f.name.value;
	
	alert(s);
}

</script>

</head>
<body>

<form name="myForm" action="javascript:send();" method="post">

<fieldset>
	<legend>입력 사항</legend>
	<p>
		<label> 아이디 :
			<input type="text" 
				name="id" 
				maxlength="10" 
				required="required" 
				pattern="[A-Za-z0-9]+"
				placeholder="아이디 입력"
				style="width: 150px">
		</label>
	</p>
	<p>
		<label>패스워드 :
			<input type="password" name="pwd"
				maxlength="10"
				required="required"
				placeholder="패스워드 입력란">
		</label>
	</p>
	
	<p>
		<label>이름 :
			<input type="text" name="name"
				required="required"
				placeholder="이름 입력란">
		</label>
	
	</p>
</fieldset>

<fieldset>
	<legend> 성별 </legend>
	<p>
		<label>
			<input type="radio" name="gender" value="m" checked="checked"> 남자
			<input type="radio" name="gender" value="f"> 여자
		</label>
	</p>
</fieldset>

<p>
	<label>전화번호 :
		<input type="tel" name="tel"> <!-- tel이나 email 타입은 text로 사용가능 -->
	</label>
</p>

<p>
	<label>이메일 :
		<input type="email" name="email">
	</label>
</p>

<p>
	<label>생년월일 :
		<input type="date" name="birth">
	</label>
</p>

<p>
	<label>근무 시작 시간 :
		<input type="time" name="stime">
	</label>
</p>

<p>
	<label>나이 :
		<input type="number" name="age" min="10" max="200">
	</label>
</p>

<p>
	<label>학력 :
		<input type="text" name="hak" list="haks">
		<datalist id="haks">
			<option>대학원졸</option>
			<option>대졸</option>
			<option>고졸</option>
			<option>기타</option>
		</datalist>
	</label>
</p>

<p>
	<label>출신도 :
		<select name="city">
			<option value="">:: 선택 ::</option>
			<option value="서울" selected="selected">서울시</option>
			<option value="인천">인천시</option>
			<option value="경기">경기도</option>
			<option value="기타">기타</option>
		</select>
	</label>
</p>

<p>
	<label>좋아하는 과목 :
		<select name="subject" multiple="multiple" style="height: 100px;">
			<option>자바</option>
			<option>스프링</option>
			<option>오라클</option>
			<option>HTML/CSS/javascript</option>
			<option>리액트</option>
		</select>
	</label>

</p>

<p>

	<label>취미 :
		<input type="checkbox" name="hobby" value="운동">운동하기
		<input type="checkbox" name="hobby" value="영화">영화보기
		<input type="checkbox" name="hobby" value="게임">게임하기
		<input type="checkbox" name="hobby" value="음악">음악듣기
		<input type="checkbox" name="hobby" value="춤">춤추기
	</label>

</p>

<p>
	<label>
		<textarea rows="5" cols="60" name="memo"></textarea>
	</label>
</p>

<p>
	<label>약관동의
		<input type="checkbox" onchange="form.sendBtn.disabled = !checked" checked="checked">
	</label>
</p>


<p>
	<button type="submit" name="sendBtn">회원가입</button>
	<button type="reset">다시 입력</button>
	<button type="button">가입 취소</button>
</p>



</form>


</body>
</html>

      - form에서 name은 폼 이름이고 action은 폼을 전송할 URL이다. 자바스크립트로 보낼 수 있음.

      - method는 전송 방식 기본 값으로는 get이고 post도 선택 가능하다.

       

      * text입력 태그

      label 태그 열고 input태그로 타입에 따라 다른 텍스트 입력 폼을 만들 수 있다.

       

       

      아이디와 이름 입력란은 input 타입이 text이고 패스워드는 타입이 password이다.

      그리고 세개 전부 placeholder 옵션으로 아무것도 입력 안해도 저렇게 무슨 입력란인지 알려준다.

       

      required 옵션은 이 입력라인 입력 되지 않으면 안된다는 의미를 부여 해준다.

       

      - fieldset의 영향으로 이 성별 태그를 감싸고 있는 영역이 보일 것이다.

      - type이 radio의 모습을 보여준다.

      - value의 뜻은 나중에 이 값들을 받아서 작업 해야할때 구분용이다. 즉 매우 중요하다.

      다 다르게 줘야하고 잘 기억 해야한다.

      예를 들어서 누가 남자를 체크했으면 m을 보내서 구분한다던가 

       

      - checked 옵션을 주면 그 항목이 자동으로 체크가 된다.

       

      type이 date인 모습

       

      type이 time인 모습

       

      - text 타입에는 입력 최솟값과 맥시멈 최대 값을 줄 수 있다.

      나이에는 10에서 200살까지 입력이 가능하다.

       

       

      - 학력은 선택 박스를 주었다.

      select 태그를 열고 그 밑으로 option을 주면 이렇게 선택 박스들을 만들 수 있다.

       

       

      - 좋아하는 과목은 마찬가지로 select 태그인데 옵션으로 multiple 옵션을 주면 여러개를 선택 할 수 있다.

       

      - 취미 부분은 type을 checkbox로 주면 이런식의 체크박스를 만들 수 있다.

       

      그리고 이렇게 열과 행을 지정해서 마치 엑셀에서 표를 만들 듯이 텍스트 입력창인

      textarea를 만들 수 있다.

       

       

      <p>
	<label>약관동의
		<input type="checkbox" onchange="form.sendBtn.disabled = !checked" checked="checked">
	</label>
</p>

      그리고 이 약관동의 옵션은 말 그대로 이걸 체크 안하면 회원가입 버튼을 못누르게 막을 수 있다.

      일단 체크박스니까 type은 checkbox를 주고 이제 onchange 옵션으로 

       

      !checked = 체크가 되어 있지 않다면 form.sendBtn.disabled 폼 영역 안에 있는 sendBtn

      (회원가입 버튼인데 이건 나중에 회원가입 버튼 만들때 name을 꼭 통일 시켜야 한다.) 

      을 disabled 비활성화 시키겠다 라는 의미.

       

      뒤에 checked는 그냥 이 폼이 열리면 자동으로 체크되게 설정 해논것임.

       

       

       

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<form>
	<p>
		<label>좋아하는 색상 선택:
			<input type="color" value="#00FF00" name="color">
		</label>
	
	</p>
	
	<p>
		<label>숫자 :
			<input type="number" name="num" min="0.0" max="10.0" step="0.5" value="0.0">
		</label>
	</p>
	
	<p>
		<label>범위 :
			<input type="range" name="num2" min="0" max="100" value="0"
				onchange="form.rangeVal.value = this.value">
			<input type="text" name="rangeVal" readonly="readonly">
		</label>
	</p>
	
	<p>
		<label>범위 :
			<input type="range" name="num3" min="10" max="100" step="10">
		</label>
	</p>
	
	
	


</form>





</body>
</html>

       

       

      input태그 type에 color을 주게되면 이렇게 색상표를 준다.

       

       

       

      type이 number일때는 이렇게 숫자를 위아래로 조절 가능하고 텍스트 입력도 가능한 박스가 생긴다.

      옵션으로 최솟값 최대값 지정 가능하고 step으로 내가 버튼으로 숫자 조정할때 얼마씩 오르고 내릴지 결정 가능

       

      value는 기본 값이다. 0으로 해주면 이 페이지가 열릴때 이 칸이 0으로 되어있음

       

       

      이 범위 게이지는 type이 range이고 마찬가지로 최솟값 최대값 지정 가능하고

      옆에 텍스트 박스랑 연동 시킬 수 있다.

      일단 평범하게 type이 text인 텍스트 박스를 하나 만들고 readonly 옵션을 준다. 해석 그대로 보기만 가능.

       

      그리고 range로 돌아와서 onchange 옵션을 준다.

      옵션 내용은 => for.rangeVal.value 이 폼 영역 안에서 rangeVal 이라는 이름을 가진 놈의 값이

      = 같다 this.value인 나의 값과 같다.

       

      즉 range의 값이 곧 텍스트의 값이다 라는 뜻 이다.

       

      range는 마찬가지로 step으로 몇단계씩 조절할지도 가능하다.

       

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<form>

	<p>
		<input type="text" value="10">
	</p>
	
	<p>
		<input type="text" value="10" readonly="readonly">
	</p>
	
	<p>
		<input type="text" value="10" disabled="disabled">
	</p>
	
	<p>
		<input type="hidden" name="num" value="10">
	</p>
	
	<p>
		<input type="image" src="btnWrite.gif">
	</p>
	
	


</form>

</body>
</html>

      - text 박스에도 여러가지 옵션들이 있다.

       

      value는 기본값 설정 해주는거고

      readonly 수정 불가능

      disabled 비활성화

       

      근데 type이 hidden이면 눈에 안보이는 박스가 생성된다.

       

      그리고 type 이미지로하고 src로 경로 지정해주면 이미지도 첨부 가능하다.

       

       

      파일 태그

       

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>


<form enctype="multipart/form-data" method="post">

<p>
	<label>파일 :
		<input type="file" name="selectFile">
	</label>
</p>

<p>
	<label>사진 :
		<input type="file" name="photo"
			accept="image/png, image/jpg, image/jpeg, image/gif">
	</label>
</p>

<p>
	<label>이미지(여러개 선택 가능) :
		<input type="file" name="images"
			multiple="multiple"
			accept="image/*">
	</label>

</p>

<p>
	<button type="button">등록하기</button>
</p>







</form>


</body>
</html>

      - 파일 태그는 말 그대로 내 윈도우에서 파일을 선택할 수 있는 UI를 제공해준다.

      type은 file 끝

       

      근데 어떤 파일들만 선택 가능하게 할 건지 옵션에서 설정 가능하다.

      사진들만 선택하게끔 하고 싶으면 accept 옵션을 사용해서 image/png = png이미지파일만 선택 가능

      이런식으로 설정 가능하다.

       

      그리고 multiple옵션으로 여러개를 선택 가능하게 할 수도 있다.

       

      반응형
      저작자표시

      '프로그래밍 > HTML & CSS' 카테고리의 다른 글

      CSS - 단위  (0) 2021.09.16
      CSS 기초(1) / 외부css 파일 가져오기  (0) 2021.09.16
      HTML - links 관련 태그 / iframe / 이미지,동영상  (0) 2021.09.16
      HTML - 리스트 관련 태그 (1)  (0) 2021.09.14
      HTML - 테이블(table) 태그  (0) 2021.09.14

      관련글 관련글 더보기

      댓글

    Copyright 2021. qkqajfl007@naver.com. All rights reserved.

    티스토리툴바