2.8. HTML 폼 [프런트 엔드 연구는 day12 노트]

2.8. HTML 폼

HTML 양식

양식이 사용자 입력을 수집 다른 유형에 사용되는 다음과 같은 라벨, 태그와 연관된 속성의 다른 유형의 구성 형태가 사용된다 :

(1) 전체 양식 영역 정의 라벨

• 액션 속성은 주소를 제출 양식 데이터를 정의
• 웨이 method 속성은 일반적으로 방법과 "후"모드 "GET", 양식 제출을 정의

2, 라벨 폼 요소 정의 텍스트 주석

3 라벨 폼 요소는 공통 정의

• 유형 특성
  • 입력 = "텍스트"정의 된 단일 라인 텍스트 입력 상자
  • 암호 입력 상자를 정의 할 수 = "암호"를 입력
  • TYPE = "라디오"정의 라디오 버튼
  • 입력 = "체크 박스"체크 상자가 정의된다
  • = "파일은"파일을 업로드 할 정의 유형
  • 입력 = 정의를 제출 버튼을 "제출"
  • 정의 재설정 "리셋"버튼 = 입력
  • 일반적인 버튼을 정의 = "버튼"을 입력
  • = "이미지"이미지로 정의 형 src 속성 정의 픽처 어드레스와 함께 제출 버튼
  • TYPE = "숨겨진"의 값을 저장하는 데 사용되는 숨겨진 폼 필드를 정의
• 폼 요소에 정의 된 속성 값
• 이름 속성은 폼 요소의 이름을 정의하고,이 이름 데이터를 제출하는 키 이름은

4, 라벨 정의 멀티 라인 텍스트 입력 상자

다운 메뉴 (5), 태그 엘리먼트 정의 드롭

6, 태그 및 라벨에 맞게이 폼 요소는 드롭 다운 옵션에 정의

등록 양식의 예 :

<form action="http://www..." method="get">
<p>
<label>姓名：</label><input type="text" name="username" />
</p>
<p>
<label>密码：</label><input type="password" name="password" />
</p>
<p>
<label>性别：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>爱好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<p>
<label>个人描述：</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍贯：</label>
<select name="site">
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">广州</option>
    <option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<!-- input类型为submit定义提交按钮  
     还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。如：
     <input type="image" src="xxx.gif">
-->
<input type="reset" name="" value="重置">
</p>
</form>