HTML/HTML Concept

[HTML] 입력 양식태그

군우 2018. 4. 17. 15:55

입력 양식

<form>에 기술함


label태그 

for속성에 input태그의 id 속성을 입력하면, label  태그가 어떤 태그를 설명

하는지 알려줌.

label태그를 클릭하면 자동으로 해당 input태그로 커서가 이동한다.


select태그

한 항목을 선택가능한 입력양식.

<select>

<option> a</option>

<option> b</option>

<option> c</option>

<option> d</option>

</select>

그 선택 옵션들을 묶는 <otpgroup label="묶는이름"> 

<select>

<optgroup label ="a.">

<option> a</option>

<option> b</option>

<option> c</option>

</optgroup>

<optgroup label ="A.">

<option> A</option>

<option> B</option>

<option> C</option>

</optgroup>

</select>


입력양식들을 묶는 <fieldset>과  테두리 제목을다는 <legend>

<form>

<fieldset>

<legend> 입력양식 legend </legend>

<table>

<tr>

<td><label for="name"> name</label></td>

<td><input id="name" type="text"/></td>

</tr>

<tr>

<td><label for="mail"> 이메일</label></td>

<td><input id="mail" type = "email" /></td>

</tr>

</table>

<input type= "submit" />

</fieldset>

</form>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    <form>
        <input type = "text" name= "text" value="text" /><br/>
        <input type = "password" name= "password" value="password" /><br/>
        <input type = "file" name= "file" value="file" /><br/>
        <input type = "checkbox" name= "checkbox" value="checkbox" /><br/>
        <input type = "radio" name= "radio" value="radio" /><br/>
 
        <input type = "hidden" name= "hiddn" value="hiddn" /><br/>
        
        <input type = "button" name= "button" value="button" /><br/>
        <input type = "reset" name= "reset" value="reset" /><br/>
        <input type = "submit" name= "submit" value="submit" /><br/>
        <input type = "image"  src ="point.png" /><br/>
        
        <label for="username"> 이름</label>
        <input id="username" type = "text"/>
        
        <input id = "girl" type = "text" name="gender" value="w" />
        <label for ="girl">여자</label>
        
    </form>
cs