기초공사 (html,css,javascript)
input 여러태그들.. 본문
//
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color:rgb(104 107 173 / 51%);
font-size:30px;
margin-top:20px;
}
li {
margin-bottom:5px;
}
label {
/* width:20px;
height:10px; */
border:1px solid blanchedalmond;
}
label[for="memo"] {
display: flex;
align-items: flex-end;
margin-bottom: -20px; /* 텍스트를 위로 20px 이동 */
}
.memoli{
display:flex;
align-items: center;
}
</style>
</head>
<body>
<p>
<h1>input type ="number"</h1>
</p>
<ul>
<li>
<label>
<input type ="checkbox" value="s_3">선물용3kg
</label>
<input type = "number" min="0" max="5">개 (최대5)
</li>
<li>
<label>
<input type = "checkbox" value="s_5">선물용_5kg
</label>
<input type = "number" min = "0" max = "10" value = "1" size = "30">개 최대(10개)
</li>
</ul>
<hr>
<p>
<h1>슬라이드 막대 이용하기</h1>
</p>
<ul>
<li>
<label>
<input type = "checkbox" value="f_3"> 가정용 3kg
<input type = "range" min = "0" max = "10" value = "1">개 최대(10개)
</label>
</li>
<li>
<label>
<input type = "checkbox" value="f_3"> 가정용 5kg
<input type = "range" min = "0" max = "5" value = "2">개 최대(10개)
</label>
</li>
<label><input type = "checkbox" value="f_3">가정용 3kg</label>
<label><input type = "checkbox" value="f_3">가정용 5kg</label>
<p><b>포장선택</b></p>
<label><input type = "radio" name="gift" value="yes">선물 포장</label>
<label><input type = "radio" name="gift" vlaue="no">선물 포장 안함</label>
</fieldset>
</ul>
<hr>
<!-- type = "date", type = "month", type = "week" -->
<h1>날짜3가지 방법</h1>
<!-- <input type = "date || month || week"> -->
<input type = "date">
<input type = "month">
<input type = "week">
<h1>날짜 지정하기</h1>
<!-- <input type = "time || datatime || datetime-local"> -->
<input type = "time">
<input type = "datetime-local">
<!-- <input type = "date" min="2020-02-01" max = "2024-12-30"> -->
<hr>
<!-- 기본버튼 type = "button" -->
<h1>기본버튼 </h1>
<input type = "button" value="공지사항 열기" onclick="window.open('notice.html')">
<hr>
<!-- 파일첨부하기 -->
<h1>파일첨부하기</h1>
<label for="handle_input">
<!-- <input type="file" id = "handle_input" onclick="handle()"> -->
<input type="file" id = "handle_input" onchange="handle()">
</label>
<div id = "filename"></div>
<script>
function handle(){
const handle_input = document.getElementById("handle_input");
const fileNameDisplay = document.getElementById('filename');
const handle_input_value = handle_input.value;
console.log('입력된 값:', handle_input_value);//이걸 filename에 넣어주면된다. 아님
console.log(handle_input.files);//list가 출력된다. 배열로 들어온다.
//input에는 filelist를 가져오는 문법이 있다.
//fileInput.files는 파일 선택 필드에서 선택된 파일의 목록을 담고 있는 FileList 객체를 반환하는 속성입니다
//if절로 이어서 써보자.
//그 배열을 하나씩 들어가게 하려면. if
//~.files가 filname_display에 들어가면된다. 필요한것.콘솔에보니 name에 파일명이들어간다.
if(handle_input.files.length > 0){
const fileName = handle_input.files[0].name;
fileNameDisplay.textContent = fileName;
}else{
fileNameDisplay.textContent = '';
}
}
</script>
<!-- readiionly -->
<h1>readionly와 required</h1>
<form>
<fieldset>
<legend>배송정보</legend>
<ul id="shipping">
<li>
<label for="pord">주문상품</label>
<input type = "text" id="pord" value="상품용 3kg" readonly>
</li>
<li>
<label for ="name">이름</label>
<input type ="text" id="name" required>
</li>
<li>
<label for="adress">주소</label>
<input type = "text" id = "adress" placeholder="문자와 숫자, 특수기호 포함">
</li>
<li>
<label for = "e-mail">이메일</label>
<input type = email id="e-mail" autofocus >
</li>
<li>
<label for="phone">연락처</label>
<input type = "tel" id="phone">
</li>
<li>
<label for="year">배송지정</label>
<input type = "date" id = "year">
</li>
<li class="memoli">
<label for="memo">메모</label>
<textarea id="memo" cols="40" rows="4"></textarea>
</li>
</ul>
<input type = "submit" value="주문하기">
<input type = "Reset" value="취소하기">
</fieldset>
</form>
<form>
<fieldset>
<legend>이벤트와 새로운 소식</legend>
<input type = "radio" id = "mailshsin" name="mail">
<label for="mailsusin">메일수신</label>
<input type = "radio" id="mailsusin_no" name="mail">
<label for="mailsusin_no">메일수신안함</label>
</fieldset>
</form>
</body>
</html>textares
cols : 텍스트 영역의 가로 너비를 문자 단위로 지정한다.
row : 텍스트 영역의 세로 길이를 줄 단위로 지정합니다. 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생긴다.
'STUDY-TEAM > html-css-js _1월' 카테고리의 다른 글
| css_08_ border (1) | 2024.01.14 |
|---|---|
| em과 rem (0) | 2024.01.10 |
| datalist와 select (1) | 2024.01.03 |
| 체크박스와 라디오 버튼 차이 (0) | 2023.12.30 |
'STUDY-TEAM/html-css-js _1월' Related Articles
more
