>  기사  >  웹 프론트엔드  >  HTML로 양식을 만드는 방법

HTML로 양식을 만드는 방법

醉折花枝作酒筹
醉折花枝作酒筹원래의
2021-04-07 16:06:1729005검색

양식 만드는 방법: 먼저 양식 태그를 사용하여 양식을 만들고 양식 프레임을 만든 다음 입력 태그를 사용하여 텍스트 입력 상자와 제출 버튼을 만든 다음 선택 및 옵션 태그를 사용하여 드롭을 만듭니다. 아래 목록; 마지막으로 textarea 태그를 사용하여 텍스트 영역을 만듭니다.

HTML로 양식을 만드는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

HTML 양식

  • 은 다양한 유형의 사용자 입력을 수집하는 데 사용됩니다.
  • 양식은 양식 요소를 포함하는 영역입니다.
  • 양식 요소를 사용하면 사용자는 텍스트 영역, 드롭다운 목록, 라디오 버튼, 확인란 등과 같은 양식에 콘텐츠를 입력할 수 있습니다. 잠깐
  • 양식은 양식 태그를 사용하여 설정합니다. up

HTML 양식 입력 요소

  • 대부분의 경우에 사용되는 양식 태그는 입력 태그(입력)입니다.
  • 입력 유형은 유형 속성(type)에 의해 정의됩니다.

텍스트 필드

<form>
	<h3>用户注册页面</h3>
	用户名:<input name = "username "type = "text"><br />	
</form>

HTML로 양식을 만드는 방법

비밀번호 필드

<form>
	密码:<input name = "passwd1" type="password"><br />
	确认密码:<input name = "passwd2" type = "password"><br />	
</form>

HTML로 양식을 만드는 방법

라디오 버튼

<form>
性别:<input name = "sex" value = "1" type = "radio" >男
     <input name = "sex" value = "0" type = "radio" checked = "checked">女<br />
 </form>

HTML로 양식을 만드는 방법

체크박스

<form>
爱好:<input name = "hobby" type = "checkbox" value="吃饭">吃饭
     <input name = "hobby" type = "checkbox" value="睡觉">睡觉
     <input name = "hobby" type = "checkbox" value="打游戏">打游戏<br />
 </form>

HTML로 양식을 만드는 방법

간단한 드롭다운 목록

<form>
出生日期:
			<select name = "year" >	
					<option value="2019">2019</optiom>
					<option value="2018">2018</optiom>
					<option value="2017">2017</optiom>
					<option value="2016">2016</optiom>		
			</select>
			<select name = "month">	
					<option value="1">1</optiom>
					<option value="2">2</optiom>
					<option value="3">3</optiom>
					<option value="4">4</optiom>
					<option value="5">5</optiom>	
					<option value="6">6</optiom>
					<option value="7">7</optiom>
					<option value="8">8</optiom>
					<option value="9">9</optiom>
			</select>
			<select name = "day">	
					<option value="1">1</optiom>
					<option value="2">2</optiom>
					<option value="3">3</optiom>
					<option value="4">4</optiom>	
					<option value="5">5</optiom>	
					<option value="6">6</optiom>
					<option value="7">7</optiom>
					<option value="8">8</optiom>
					<option value="9">9</optiom>
					
			</select>	
 </form>

HTML로 양식을 만드는 방법

Reset

<form>
<input type="reset" value="重置">
 </form>

HTML로 양식을 만드는 방법

제출 버튼

<input type="submit" value="同意以下服务协议,提交注册信息">

HTML로 양식을 만드는 방법

Textarea

<textarea name="wenben"></textarea>

HTML로 양식을 만드는 방법

전체 코드


	
		注册页面
		
	
	
		

用户注册页面

用户名:
密码:
确认密码:
性别:
爱好:吃饭 睡觉 打游戏
出生日期:
<input type="submit" value="同意以下服务协议,提交注册信息">

실험 결과

HTML로 양식을 만드는 방법

【추천 학습: Html5 튜토리얼

위 내용은 HTML로 양식을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.