[HTML] 입력 양식

복습

https://shins99.tistory.com/19

[HTML] 간단한 글자 태그

---

input 입력 변수

<!-- <input type="형태" name="변수명" value="화면에 보여줄 값" /> 태그 닫기를 해줄 것.-->
    <!-- <input type="text" : 글자 입력 >-->
    <input type="text" name="" value="ID" />
    <!-- <br /> : 줄바꿈(추천 -> 리액트 사용하면 <br>은 에러 나기 때문) -->
    <br />

 

패스워드 입력 양식

<input type="password" name="password" value="PW" />

 

체크박스 입력 양식

<input type="checkbox" name="checkbox" value="checkbox" /> 좋음
<input type="checkbox" name="checkbox" value="checkbox" /> 나쁨

좋음 나쁨

 

라디오 입력 양식

<!-- 참고) name의 값이 2개가 일치해야 한쌍으로 작동 (radio만 적용) -->
    <input type="radio" name="radio" value="radio" /> 여
    <input type="radio" name="radio" value="radio" /> 남

여 남

 

파일 대화상자 입력 양식

 <input type="file" name="file" value="file" />

 

히든 입력 양식 

히든 입력 양식 = 특수용도 (화면에는 안보이지만 html문서에 값을 가지고 있음.)
    <input type="hidden" name="hidden" value=" 홍길동" />

 

버튼 입력 양식

<input type="button" value="버어트은" />
    <!-- 화면 입력된 text를 지우는 기능 -->
    <input type="reset" value="reset" />
    <!-- 다른 웹페이지(html페이지)로 이동하는 기능 -->
    <input type="submit" value="submit" />

 

라벨 태그

<!-- 라벨 태그 : 입력양식 앞에 제목(설명) 등으로 사용됨 -->
    <label for="">이름</label>
    <input type="text" name="" value="" /><br />
    <label for="">성별</label>
    <input type="radio" name="aa" value="radio" />
    <label for="">남자</label>
    <input type="radio" name="aa" value="radio" />
    <label for="">여자</label>
    <br />
    <input type="button" value="가입" />

이름
성별 남자 여자

 

셀렉트 입력 양식

 <!-- select 입력양식 : 여러개의 목록이 있는 태그  -->
    <!-- selected 속성 : 미리 선택된 값을 지정하는 속성 -->
    <select>
        <option value="a">김밥</option>
        <option value="b" selected>떡볶이</option>
        <option value="c">순대</option>
        <option value="d">어묵</option>
    </select>

김밥 떡볶이 순대 어묵

 

optgroup 태그

<!-- <optgroup> 태그 : 목록에 그룹명을 부여해서 화면에 표시함 -->
      <!-- front 기술 -->
      <optgroup label="HTML5">
        <option>html</option>
        <option>css</option>
        <option>javascript</option>
      </optgroup>

      <!-- backend 기술 -->
      <optgroup label="backend">
        <option>java</option>
        <option>springboot</option>
      </optgroup>

html css javascript java springboot

 

multiple 속성

<!-- multiple="multiple" 속성 : 여러개 선택(ctrl, shift 키를 이용)-->
    <select multiple="multiple">
        <option>김밥</option>
        <option>떡볶이</option>
        <option>순대</option>
        <option>어묵</option>
    </select>

김밥 떡볶이 순대 어묵

 

form 태그

<!-- form(부모태그, 생략가능) > 입력양식(자식태그) -->
    <form>
      <!-- 1번 -->
      <label for="">이름</label>
      <input type="text" />
      <br />
      <!-- 2번 -->
      <!-- 입력양식 : name, id, class, width, height 등 공통속성(모든 태그에 있음) -->
      <!-- for : "변수명" == id : "변수명" :laber 태그와 input 태그가 연결 -->
      <label for="name">이름</label>
      <input type="text" id="name"/>
    </form>

이름
이름

 

textarea 글쓰기 입력 양식

 <!-- textarea 글쓰기 입력양식 -->
    <!-- 속성 cols : 가로 크기-->
    <!-- 속성 rows : 세로 크기-->
    <textarea cols="40" rows="20"></textarea>

 

html에서 자주 사용하는 특수 태그들

코드	표현 문자	용도
&lt;	<	꺽쇠
&gt;	>	꺽쇠
&nbsp;	공백 ' ' (1칸 space)	공백
&amp;	&	앰퍼센드
&quot;	"	큰따옴표