smarti,스마트아이

html 입력양식 2

선택 입력 select 요소

select 요소는 여러 개의 옵션이 드롭다운 리스트(drop-down list)로 되어 있으며, 그 중에서 단 하나의 옵션만을 입력 받을 수 있다.
콤보 박스라고도 하며, 풀다운 메뉴(pull-down menus)라고도 한다.

option 요소는 드롭다운 리스트에 선택할 수 있는 각각의 옵션을 명시한다.

좋아하는 과일은?
<select name="fruit">
  <option value="apple">사과</option>
  <option value="banana" selected>바나나</option>
  <option value="orange">오렌지</option>
  <option value="strawberry">딸기</option>
</select>

selected 속성을 이용하여 드롭다운 리스트 중에서 처음에 미리 선택되는 옵션을 지정할 수 있다.

option 요소

option 요소는 여러 항목 중에 선택 가능한 항목이다.

option 요소에서 사용하는 value 속성은 텍스트 필드에서의 value 속성과는 조금 다르다. 텍스트 필드에서 value 속성에 값을 입력하면 기본값이 입력되지만, <option> 태그의 경우는 이 option이 선택된 경우에 전송되는 값을 지정하는 것이다.

optgroup 요소

optgroup 요소는 HTML 4 버전에서 새로 만들어진 태그로 옵션을 그룹화할 수 있다.
대부분의 웹브라우저에서 지원하고 있다.

당신의 취미는?
<select name="hobby">
  <option value="독서">독서</option>
  <optgroup label="스포츠">
    <option value="야구">야구</option>
    <option value="축구">축구</option>
  </optgroup>
  <option value="음악감상">음악감상</option>
</select>

 

문장 입력 textarea 요소

input 태그 요소가 한줄의 텍스트만 입력지만, textarea 태그 요소는 여러 줄의 텍스트를 입력받을 수 있다.

<textarea name="content" rows="5" cols="30"></textarea>

너비와 높이를 지정하기 위해서 rows와 cols 속성이 사용된다.

기본값은 <textarea>와 </textarea> 태그 사이에 적어주면 된다.
기본값이 입력되면 처음 화면이 표시되어 있을 때 입력이 되어 있는 것을 확인 할 수 있다.

<textarea name="content" rows="5" cols="30">내용을 입력하세요.</textarea>

 

버튼 button 요소

button 요소는 사용자가 누를 수 있는 버튼을 표시한다.

<button type="button" onclick="alert('버튼을 눌렸습니다.')">
    버튼을 눌러주세요.
</button>

버튼은< input> 태그에 type='button'으로도 표현 가능하다.

 

필드셋 fieldset 요소

fieldset 요소는 form 요소와 관련된 데이터들을 하나로 묶어주는 역할을 한다. legend 요소는 fieldset 요소 안에서만 사용할 수 있으며, fieldset 요소의 제목을 표시한다.

<form>
  <fieldset>
    <legend>로그인 인증</legend>
    <p>사용자명 : <input type="text" name="username"></p>
    <p>비밀번호 : <input type="password" name="password"></p>
    <button type="button">로그인</button>
  </fieldset>
</form>

라벨 label 요소

label 요소는 사용자가 input text, checkbox, radio button의등을 좀 더 쉽게 선택할 수 있도록 도와준다.
label 요소를 클릭하면 input text의 경우에는 자동으로 focus가 이동하고 checkbox, radio button의 경우는 자동으로 선택된다.
label의 for 속성의 이름과 폼요소의 id 값이 일치하게 아래와 같이 작성하면 된다.

<label for="html">HTML</label> <input type="checkbox" name="html" id="html">
<label for="css">CSS</label> <input type="checkbox" name="css" id="css">

 

[세상살이] - 윌리암 아돌프 부게로 (William Adolph Bouguereau)

윌리암 아돌프 부게로 (William Adolph Bouguereau)

[디자인공부] - 포토샵으로 치즈 텍스트 효과 만들기 (다운로드 포함)

포토샵으로 치즈 텍스트 효과 만들기 (다운로드 포함)

[세상살이] - 성공과 실패는 습관이 좌우한다

성공과 실패는 습관이 좌우한다

[코딩공부] - CSS 박스모델, 마진, 아웃라인

CSS 박스모델, 마진, 아웃라인

[디자인공부] - 포토샵으로 만화 텍스트 효과 문자 만들기

포토샵으로 만화 텍스트 효과 문자 만들기