스타일 및 input 태그

민삼이·2023년 8월 3일
0
post-thumbnail

1.인라인 스타일
*<>태그 안에 작성

<h1 style="color: red;">❤❤별다방 카페</h1> 

2.내부 스타일
*head와 body사이에 작성

 <style> h2{color: cornflowerblue;}</style>

3.외부 스타일
*head에 작성

<link rel="stylesheet" href="style.css">
style.css 와 연결해준다.

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>
</head>
<body>
     <form action="#" method="get">
        <label for="min">아이디 (6자 이상) <input type="text" size="5" id="min"></label>
        <br></br>
        <label for="user-pw">비밀번호</label>
        <input type="password" id="user-pw" size="5" name="pw">
        <br></br>
        <input type="submit" value="로그인">
        <input type="reset" value="리셋">
<ul>
   <li><label for="id">아이디 (6자 이상) 
   <input type="text" id="id" name="id" placeholder="아이디" readonly value="testid" 
   disabled></label> </li>
   <li><label for="pw">비밀번호 <input type="password" required>
   </label> </li>
   <li><label for="url">검색 
   <input type="search" autofocus placeholder="검색하세요"></label></li>
   <li><label for="email">이메일 <input type="email"></label></li>
   <li><lavel for="tel">전화번호 <input type="tel"></lavel></li>
</ul>
<fieldset>
    <legend>상품 선택</legend>
    <p><b>주문할 상품을 선택해 주세요.</b></p>
    <label><input type="checkbox" value="s_3" name="1">선물용 3kg </label>
    <br>
    <label><input type="checkbox" value="s_5" name="2">선물용 5kg </label>
    <br>
    <label><input type="checkbox" value="f_3" name="3">가정용 3kg </label>
    <br>
    <label><input type="checkbox"value="f_5" name="4">가정용 5kg </label>
    <p><b>포장 선택</b></p>
    <laver><input type="radio" name="gift" value="yes">선물포장</laver>
    <laver><input type="radio" name="gift" value="no">선물포장 안함</laver>
</fieldset>
  <ul>
    <li><label><input type="checkbox" value="s_3" name="1">선물용 3kg 
    </label> <input type="number" min="0" max="3">(최대3)</li>
    <li><label><input type="checkbox" value="s_5" name="2">선물용 5kg 
    </label> <input type="number" min="0" max="5">(최대5)</li>
    <li><label><input type="checkbox" value="f_3" name="3">가정용 3kg 
    </label> <input type="number" min="0" max="3">(최대3)</li>
    <li><label><input type="checkbox" value="f_5" name="4">가정용 5kg 
    </label> <input type="number" min="0" max="5">(최대5)</li>
  </ul>  
  <ul>
    <li><label><input type="checkbox" value="s_3" name="1">선물용 3kg 
    </label> <input type="range" min="0" max="3">(최대3)</li>
    <li><label><input type="checkbox" value="s_5" name="2">선물용 5kg 
    </label> <input type="range" min="0" max="5">(최대5)</li>
    <li><label><input type="checkbox" value="f_3" name="3">가정용 3kg 
    </label> <input type="range" min="0" max="3">(최대3)</li>
    <li><label><input type="checkbox" value="f_5" name="4">가정용 5kg 
    </label> <input type="range" min="0" max="5">(최대5)</li>
  </ul>  

<h1>날짜 지정하기</h1>
<input type="date">
<input type="month">
<input type="week">
<br>
<br>
<h1>시간 지정하기</h1>
<input type="time">
<input type="datetime-local">
<br>
<br>
<h1>로그인 리셋버튼 만들기</h1>
<input type="image" src="image/login.png" alt="로그인">
<input type="submit"  value="로그인">
<input type="reset"  value="리셋">
<br>
<br>
<h1>공지버튼 만들기</h1>
<input type="button" value="공지 창 열기" onclick="window.open('test.0801.html')">
<br>
<br>
<h1>파일 선택</h1>
<input type="file">
<br>
<br>
<h1>서버 넘기기</h1>
<input type="hidden" name="hidden" value="toss"> 

<h1>표 만들기</h1>
<textarea name="내용" id="" cols="30" rows="10"></textarea>
<br>
<p>전화번호:
<select name="telnum">
    <option>지역번호</option>
    <option>02</option>
    <option>051</option>
    <option>032</option>
</select>
</p>
<p>전화번호:
    <select name="telnum">
        <option value="000">지역번호</option>
        <option value="02">서울</option>
        <option value="051" >부산</option>
        <option value="032">경기도</option>
    </select>
    </p>
</form>
</body>
</html>

profile
개발 어린이

1개의 댓글

comment-user-thumbnail
2023년 8월 3일

잘 봤습니다. 좋은 글 감사합니다.

답글 달기