HTML 05. 입력양식 및 폼 관련 태그(2)

1. 1. text와 관련된 input태그의 타입 

 <input type="text">
:  한줄짜리 텍스트를 입력할 수 있는 텍스트 상자 (type속성의 기본값)

<label for="userId">아이디 :</label> <!--label for="id" 라벨태그 클릭시 id에 커서 포커싱-->
        <input type="text" name="userId" id="userId" placeholder="아이디를 입력하세요" maxlength="12" required>HTML

>> placeholder :텍스트 입력전에 해당 내용에 대한 설명 
     maxlength : 입력할 수 있는 최대길이 설정 
     required : 필수로 입력받아야하는 속성으로 입력 안했을시 제출 불가 

아이디 :

 

<input type= "password">
: 사용자가 입력한 값이 노출되지 않도록 할 수 있는 텍스트 상자

<label for="userPwd">비밀번호 : </label>
     <input type="password" id="userPwd" name="userPwd" placeholder="영문,숫자,특수문자 8~15" maxlength="15" required>
<br>HTML

 

비밀번호 :

 

<input type="search | url | email | tel >
: 각각 정보에 맞게 세분화된 기능 제공 
- search : x버튼 제공
- url : url( http://) 형식으로 입력되었는지 내부적으로 유효성 체크 후 제출 가능 
- email : 이메일형식으로 입력되었는지 내부적으로 유효성 체크 후 제출 가능
- tel : 모바일에서 숫자키 입력 창뜸

검색 :
홈페이지 :
이메일 :
전화번호 :

 

<textarea>
: 텍스트 여러줄 입력할 수 있는 태그

<form action="test.do">
        제목 : <input type="text" name="title" size="40"> <br>
        내용 : <textarea name="content" placeholder="내용 입력" cols="40" rows="10" style="resize: none;"></textarea>
        <!--style="resize: none;" 사이즈 재조정 불가하게끔 하는 속성-->
    </form>HTML

 

제목 :
내용 :

 

 

---

2.  

3. 2. 숫자와 관련된 input태그의 타입

<input type="number">
 : 숫자만 작성가능한 텍스트 상자, 스핀 박스가 표시됨( 스핀박스: 위/아래 화살표 버튼)

 수량 : <input type="number" name ="amount" min="0" max="20" step="5" value="0">
        <!--step : 증가값 지정 / value : 미리값 부여/ -->
        <br>HTML

4.  

수량 :

 

<input type="range">
: 슬라이드바를 통해 숫자 지정가능 

 점수 : <input type="range" name="score" min="0" max="100" step="20">HTML

 

점수 :

 

---

5. 3. 날짜 및 시간과 관련된 input태그의 타입

<input type="date |  month | week | time | datetime-local">

-date : 연도, 월, 일 입력받을 수 있는 텍스트 상자

-month : 연도, 월 입력받을 수 있는 텍스트 상자

-week : 연도, 해당 연도에 몇번째 주인지를 입력받을 수 있는 텍스트 상자

-time : 오전/오후, 시, 분 입력받을 수 있는 텍스트상자
-datetime-local : 연도, 월, 일 오전|오후, 시, 분 입력받을 수 있는 텍스트 상자

 

 

date :
month :
week :
time :
datetime-local :

6.  

---

7. 4. 라디오 버튼, 체크박스 관련 input태그의  타입 

<input type ="radio">
: 제시한 여러개의 값들 중에서 오로지 한개만 선택해야할때
( name속성값이 같은 것끼리 하나의 그룹이 되고 그룹내에서 한가지만 선택가능 )
제출시 선택된 (checked) 라디오 버튼의 value값이 넘어감

성별 : 
        <input type="radio" id="radioX" name="gender" value="X" checked> <label for="radioX">선택안함</label> 
        <input type="radio" id="radioF" name="gender" value="F"> <label for="radioF">여자</label>
        <input type="radio" id="radioM" name="gender" value="M"> <label for="radioM">남자</label>
        <!--하나만 체크하고자 할 경우에는 같은 키값을 부여하면 됨 -->HTML

성별 : 선택안함 여자 남자

 

<input type="checkbox">
: 제시한 여러개의 값들 중에서 하나이상의 값을 선택할 경우 
  제출시 checked된 체크박스의 key+value 세트가 넘어감 

취미 : <input type="checkbox" id = reading name="hobby" value="reading" checked>
         <label for="reading">독서</label>
         <input type="checkbox" id="sports" name="hobby" value="sports">
         <label for="sports">운동</label>
         <input type="checkbox") id="movie" name="hobby" value="movie">
         <laber for="movie">영화</laber>
         <!--같은키값부여해도 여러개의 값 기본값으로 설정-->
        <br><br>
        <input type="submit">HTML

취미 : 독서 운동 영화

 

 

---

8. 5. 추가적인 input태그의 타입 

<input type = "color">
: 색상을 선택할 수 있는 타입

색상선택 : <input type="color" name="color">HTML

색상선택 :

 

<input type ="file">
:첨부하고자 하는 파일을 선택할수있는 타입

첨부파일 : <input type="file" name="uploadFile">HTML

첨부파일 :

 

<input type="hidden">
:특정 값을 사용자에게 입력받지않고, 화면에 노출시키지도 않지만 제출하고자 할때

<input type="hidden" name="hiddenValue" value="ㅋㅋㅋ">HTML

 

<input type="submit | reset | button >  

 <input type="submit"> <!--value="제출"(submit타입시 기본값)-->
 <input type="reset"> <!--valnue="초기화"(reset타입시 기본값)-->
 <input type="button" value="일반버튼"><!--기본값 없음  제출/초기화도 안됨-->HTML

 

<button type ="submit | reset | button"> -> type생략시 기본값 submit
  : 버튼의 기본 글자가 써있지 않기때문에 직접 써줘야함 

<button type="submit"> 제출</button> 
<button type="reset">초기화</button>
<button type="button">일반버튼</button>HTML

 

 

---

9. 6. select  태그와 option 태그 

 : 제시한 여러개의 옵션들 중에 선택할 수 있게끔 제공하는 기능 
  제출시 현재 선택(selected)된 option값이 넘어감. 각option값에 value값을 명시하지 않았을 경우 content영역값이 넘어감

 국적 :
            <select name="national"> <!--키값은 select에 한번만 부여-->
                <option value="ko">한국</option>
                <option value="us">미국</option>
                <option value="eu">영국</option>
                <option value="ge">독일</option>
                <option selected>선택안함</option>
            </select>HTML

 

국적 : 한국 미국 영국 독일 선택안함

 

** datalist :사용자에게 직접 키보드로 값을 입력받을 수도 있고 목록에서 선택할 수도있는 기능

  좋아하는 색상 : 
            <input type="text" name="color" list="colorList">
            <datalist id="colorList">
                <option value="black">검정색</option>
                <option value="white">흰색</option>
                <option value="skyblue">하늘색</option>
            </datalist>HTML

 

좋아하는 색상 :