IT/html + css

[html] form 요소

on sunday 2019. 12. 27. 08:53
728x90
반응형

form 요소는 온라인 서식에서 작성한 값들을 서버 프로그램(서식값 처리)으로 전송하는 역할을 담당하며

블록 요소 입니다.

 

fieldset은 블록 요소이며 form요소 안에 있는 여러 요소를 그룹화 할 때 사용하며 

그룹제목 legend요소를 포함합니다.

<form action="url" method="post">
	<fieldset>
		<legend>그룹제목</legend>
	</fieldset>
</form>

 

 

label for="for 값" -> for값을 input요소의 id값과 동일하게 하면  편의성을 확대시켜줍니다.

(label의 텍스트를 선택해도 input값에 커서가 이동)

maxlength="8" -> 최대로 쓸 수 있는 글자 수입니다.

required -> input값이 입력되었는지에 대한 부분과 유효성을 판단해주는 속성입니다.

 

placeholder의 속성변경  선택자는 input::placeholder입니다.

<li>
  <label for="id">아이디 :</label>
  <span>
  	<input type="text" id="id" maxlength="8" placeholder="아이디를 입력하세요" required>
    <!--required 입력필드에 값이 채워졌는지에 대한 부분--> 
   </span>
 </li>
.list_content li:first-child input::placeholder{padding-left:10px; color:green;}

 

 

type="password" -> 암호화 처리 되도록 합니다.(입력된 내용이 *로 표시됩니다.)

autofocus -> 페이지가 로드되었을 떄  입력필드에 커서가 자동으로 이동하는 속성

<li>
  <label>비밀번호 :</label>
  <span>
  	<input type="password" autofocus maxlength="16">
  </span>
  <!--autofocus 페이지가 로드되었을 떄  입력필드에 커서가 자동으로 이동하는 속성-->
</li>

 

 

<label><input> type="text"></label>

->이런식으로 label안에 input을 위치시키거나 반대의 경우로 사용할수도있습니다.

<input id="for 값"><label for="for 값"></label>

 

<input type="radio" value="" name="">

-> value는 서버로 전송 되는 값이며 같은 name을 입력해서 둘중에 하나만 선택되도록 합니다.

(*checked는 기본적으로 선택되어있게 하는 속성입니다.)

<li>
  <label for="">이메일</label>
  <span>
    <input type="email"> @ <input type="text" required>
    <select name="" id="">
      <option value="네이버">네이버</option>
      <option value="네이버">네이버</option>
      <option value="네이버">다음</option>
    </select>
  </span>
  <b>메일수신여부 
    <input type="radio" value="y" name="recive" >예
    <input type="radio" value="n" name="recive" checked>아니오
  </b>
 </li>

@ 메일수신여부 예 아니오

 

 

<li>
  <label for="ph">핸드폰번호</label>
  <span>
  	<input type="text" id="ph"> - <input type="text"> - <input type="text">
  </span>
</li>

 

<li>
  <label>성별 : </label>
  <span>
    <input type="radio" value="m" name="h">남자
    <input type="radio" value="w" name="h">여자
  </span>
</li>

남자 여자

 

<input type="checkbox" value=""> 

->input type="checkbox"는 중복체크가 가능한 type이기 때문에 value에 name이 같아도 중복체크가 됩니다.

li>
  <label for="">관심분야</label>
  <span>
    <input type="checkbox" value="html" name="chk1">HTML
    <input type="checkbox" value="css" name="chk2">CSS
    <input type="checkbox" value="jquery" name="chk3">jQUERY
  </span>
</li>

HTML CSS jQUERY

 

input의 value 설정 css 선택자는 input[value] 입니다.

 

type종류↓

submit 전송버튼

reset 초기화 버튼

buttom 범용 버틑

<li>
  <span>
    <input type="submit" value="전송">
    <input type="reset" value="취소">
    <input type="button" value="임시버튼">
  </span>
</li>
.list_content li:nth-child(7) input[value]
{padding:0 10px; background:pink; color:#000; font-weight:bold; cursor:pointer;}

 

type="file" -> 첨부파일

<li>
  <label>파일올리기 :</label>
  <span>
  	<input type="file">
  </span>
</li>

 

select요소에 multipul / multipul size="2" 를 주게되면 복수선택 가능 / 2개 복수선택가능한 태그입니다.

<li>
  <label for="course">수강과목 : </label>
  <span>
  	<input type="text" id="course" list="subjects">
  </span>
  <datalist id="subjects">
    <option value="html5">html5</option>
    <option value="css3">css3</option>
    <option value="javascript">javascript</option>
    <option value="jQUERY">jQUERY</option>
  </datalist>
</li>

위 코드와 아래 코드는 같은 것입니다. 상황에 따라 알맞는 것으로 사용하면 됩니다.

<p>과목선택
  <select multipul>
    <option value="html5">html5</option>
    <option value="css3">css3</option>
    <option value="javascript">javascript</option>
    <option value="jQUERY">jQUERY</option>
  </select>
</p>

과목선택

 

textarea 태그에 rows="3"을 주면 3줄이 넘으로 스크롤이 생기게 합니다.

<li>
  <label for="">신청내용</label>
  <span>
  	<textarea name="" id=""></textarea>
  </span>
</li>

 

input 속성중에 readonly속성과 disabled속성은 요소의 내용을 수정하거나 선택할 수 없도록 비활성화 상태로 만듭니다.

readonly속성은 값이 변경되지 않은 채 폼 전송이 되어야 하는곳에 사용됩니다.

 

<input type="number">는 숫자 입력박스에 직접 입력하거나 상하 화살표를 눌러 선택할 수 있게 합니다.

<li>
  <label for="book">선택한 책 :</label>
  <span>
  	<input type="text" id="book" value="반응형웹페이지" readonly>
  </span>
  
  <label for="number">수량 :</label>
  <span>
  	<input type="number" id="number" value="1">
  </span>
</li>

 

 

<input type="date">  ->

연,월,일을 선택할 수 있는 박스가 나옵니다.

<li>
  <label for="date">날짜 시간(UTC) :</label>
  <span>
  	<input type="date" id="date">
  </span>
</li>

 

 

<li>
	<div class="scrolloverflow"></div>
</li>
<p><input type="checkbox">개인정보취급방침 동의</p>
.scrolloverflow{height:150px; border:1px solid #dfdfdf; overflow-y:scroll;}

 

 

 

 

<p>스터디 지역
  <select name="" id="">
    <optgroup label="종로구">
      <option value="jongro-insad">인사동</option>
      <option value="jongro-iksund">익선동</option>
      <option value="jongro-ankukd">안국동</option>
    </optgroup>
    <optgroup label="노원구">
      <option value="nowon-jkd">중계동</option>
      <option value="nowon-krd">공릉동</option>
      <option value="nowon-skd">상계동</option>
    </optgroup>
  </select>
</p>

 

 

스터디 지역

 

form-input.html
0.01MB

 

+) 자동완성 기능 = autocomplete="on"(자동완성 사용)  / "off"

 

+) input type

search - 텍스트 입력시 x(삭제) 버튼이 나타납니다.

email - 이메일 입력 양식에 맞지 않을경우 오류 메시지가 나타나며 입력하기 편한 키패드로 바뀝니다.

url -  url 양식에 맞지 않을경우 오류메시지가 나타납니다.

tel - 전화번호 입력박스입니다.

range - 숫자 범위가 슬라이드 바 로 나타납니다.(볼륨 조절)

color - 색상 선택 박스가 나타납니다.

 

+) input type에 커서를 놨을 때 생기는 테두리의 속성은 outline입니다.

outline-offter : border와 outline 사이의 거리입니다.

outline-width : outline의 너비.

outline-color : outline의 색상.

outline:none; : outline을 없앱니다.

 

+) select 요소에 생기는 검정색역삼각형은

css에서 appearance:none; -webkit-appearance:none; 을 주면 됩니다.

 

+)<input type="checkbox">의 체크박스모양이 옆에있는 글씨와 수직가운데 정렬이 맞지 않을경우

vertical-align:-3px; 으로 정렬시킬 수 있습니다.

728x90
반응형
저작자표시 비영리 변경금지