- 앞에 쓴 글 : Bilibili 다크호스 프로그래머 핑크 선생님의 튜토리얼 참조
- 주소 : https://www.bilibili.com/video/BV14J4114768?t=328&p=26
목차
양식 레이블 (마스터)
- HTML에서 완전한 양식은 일반적으로 양식 컨트롤 (양식 요소라고도 함), 프롬프트 정보 및 양식 필드 의 세 부분으로 구성 됩니다 .
양식 제어 한 줄 텍스트 입력 상자, 암호 입력 상자, 확인란, 제출 버튼, 재설정 버튼 등과 같은 특정 양식 기능 항목을 포함합니다. 프롬프트 정보 일반적으로 양식에는 사용자가 입력하고 작동하도록 요청하는 설명 텍스트가 포함되어야합니다. 양식 필드 모든 양식 제어 및 프롬프트 정보를 보유하는 데 사용되는 컨테이너와 동일하며 양식 데이터를 처리하는 데 사용되는 프로그램의 URL 주소와 데이터를 서버에 제출하는 방법을 정의 할 수 있습니다. 양식 필드가 정의되어 있지 않으면 양식의 데이터를 백그라운드 서버로 전송할 수 없습니다.
입력 제어 (강조)
<input type="属性值" value="你好">
- 입력
- <input /> 태그는 단일 태그입니다.
- 유형 속성은 다른 제어 유형을 지정하기 위해 다른 속성 값을 설정합니다.
- type 속성 외에도 다른 속성이 있습니다.
공통 속성 :
유형 속성
- 이 속성은 값을 변경하여 사용자가 속한 입력 양식을 판별 할 수 있습니다.
- 예를 들어 = 'text'를 입력하면 텍스트 상자를 사용자 이름, 별명 등으로 사용할 수 있습니다.
- 예를 들어 = 'password'를 입력하면 사용자가 암호 상자에 입력 한 내용이 보이지 않음을 의미합니다.
用户名: <input type="text" /> 密 码：<input type="password" />
값 속성 값
用户名:<input type="text" name="username" value="请输入用户名">
- value 기본 텍스트 값입니다. 일부 양식은 페이지가 열리 자마자 기본적으로 여러 텍스트를 표시하려고합니다.이 값으로 설정할 수 있습니다.
이름 속성
用户名:<input type="text" name=“username” />
- name 백엔드가 name 속성을 통해이 양식을 찾을 수 있도록 양식의 이름입니다 .
- 페이지에는 많은 형식이 있으며 이름의 주요 기능은 다른 형식을 구별하는 것입니다.
- 이름 속성 뒤에있는 값은 우리 자신이 정의합니다.
- 라디오가 그룹 인 경우 하나를 선택할 수 있도록 동일한 이름을 지정해야합니다.
<input type="radio" name="sex" />男 <input type="radio" name="sex" />女
- 이름 속성은 이제 덜 사용하지만 아약스와 백엔드를 배울 때는 필수입니다.
확인 된 속성
- 기본 선택 상태를 나타냅니다. 라디오 버튼과 체크 버튼에서 더 일반적입니다.
性 别: <input type="radio" name="sex" value="男" checked="checked" />男 <input type="radio" name="sex" value="女" />女
- 위의 것은 남성 라디오 버튼이 기본적으로 선택되어 있음을 의미합니다.
입력 속성 요약
| 속성 | 기술 | 효과 |
|---|---|---|
| 유형 | 양식 유형 | 다른 제어 유형을 지정하는 데 사용됩니다. |
| 값 | 양식 값 | 양식에 기본적으로 표시되는 텍스트 |
| 이름 | 양식 이름 | 페이지에는 많은 형식이 있으며 이름의 주요 기능은 다른 형식을 구별하는 것입니다. |
| 확인 | 기본적으로 선택됨 | 처음에 라디오 또는 확인 버튼이 선택되었음을 나타냅니다. |
라벨 (이해)
- 목표 :
- 라벨의 주요 목적은 사용자 경험을 개선하는 것입니다. 사용자를위한 최상의 서비스를 개선합니다.
- 개념:
- 레이블 태그는 입력 요소의 레이블 (레이블)을 정의합니다.
- 효과:
- 양식 요소를 바인딩하는 데 사용됩니다. 레이블을 클릭하면 바인딩 된 양식 요소가 입력 포커스를받습니다.
- 요소를 바인딩하는 방법?
첫 번째 사용법은 레이블이있는 입력 양식을 직접 포함하는 것입니다 .
<label> 用户名： <input type="radio" name="usename" value="请输入用户名"> </label>
- 단일 형태 선택에 적합
- 속성 의 두 번째 사용법 은 레이블이 바인딩되는 양식 요소를 지정합니다.
<label for="sex">男</label> <input type="radio" name="sex" id="sex">
- 우리가하면 레이블의 텍스트를 클릭, 커서는 지정된 형식으로 배치됩니다
텍스트 영역 제어 (텍스트 필드)
- 문법:
<textarea > 文本内容 </textarea>
- 효과:
- 텍스트 영역 컨트롤을 통해 여러 줄 텍스트 입력 상자를 쉽게 만들 수 있습니다.
- cols = "각 행의 문자 수"rows = "표시된 행 수"실제로 개발하지 않습니다.
텍스트 상자와 텍스트 필드의 차이점
형태 이름 차이점 기본값 표시 장면 입력 유형 = "텍스트" 텍스트 상자 한 줄의 텍스트 만 표시 할 수 있습니다. 단일 레이블, 값별로 기본값 표시 사용자 이름, 별명, 비밀번호 등 텍스트 영역 텍스트 필드 여러 줄의 텍스트를 표시 할 수 있습니다. 이중 레이블, 기본값은 레이블 중간에 기록됩니다. 메세지 보드
드롭 다운 목록 선택
- 목적:
- 사용자가 선택할 수있는 옵션이 여러 개인 경우 공간을 절약하기 위해 선택 컨트롤을 사용하여 드롭 다운 목록을 정의 할 수 있습니다.
- 문법:
<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> ... </select>
- 노트:
- <select>에는 적어도 한 쌍의 옵션이 있습니다.
- option에서 selected = "selected " 를 정의 하면 현재 항목이 기본 선택 항목이 됩니다.
- 그러나 우리는 실제 개발에서 덜 사용합니다
양식 필드
- 수집 된 사용자 정보를 서버로 전송하는 방법은 무엇입니까?
- 양식 필드를 통해
- 목적:
- HTML에서 양식 태그는 사용자 정보를 수집하고 전송하기위한 양식 필드를 정의하는 데 사용되며 양식의 모든 내용은 서버에 제출됩니다.
- 문법:
<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件 </form>
- 공통 속성
속성 속성 값 효과 동작 URL 주소 양식 데이터를 수신하고 처리하는 서버 프로그램의 URL 주소를 지정하는 데 사용됩니다. 방법 가져 오기 / 게시 양식 데이터의 제출 방법을 설정하는 데 사용되며 값은 get 또는 post입니다. 이름 이름 동일한 페이지에서 여러 양식을 구별하기 위해 양식 이름을 지정하는 데 사용됩니다.
- 노트:
- 각 양식에는 고유 한 양식 필드가 있어야합니다. 지금 페이지를 만들 때 작성하지 않으면 효과를 볼 수 없지만 나중에 ajax 백그라운드 상호 작용을 배우면 양식 필드가 필요합니다.
요소 속성
- 요소 속성 값 은 큰 따옴표 구문을 사용 합니다.
- 요소 속성 값을 쓸 수 있습니다.
- 권하다:
<input type="text" /> <input type="radio" name="name" checked="checked" />
- 권장하지 않음 :
<input type=text /> <input type='text' /> <input type="radio" name="name" checked />
종합 사례 (등록 페이지)
- 암호:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>世纪佳缘-你在我也在</title> </head> <body> <table width="600" align="center"> <caption> <h4> 青春不常在，抓紧谈恋爱 </h4></caption> <!-- 1 --> <tr> <td>性别</td> <td> <input type="radio" name="sex" checked="checked" /><img src="images/man.jpg" /> 男 <input type="radio" name="sex" /><img src="images/women.jpg" /> 女 </td> </tr> <!-- 2 --> <tr> <td>生日</td> <td> <!-- 年份的 --> <select> <option>--请选择年--</option> <option>1995</option> <option>1996</option> <option>1997</option> <option>1998</option> </select> <!-- 月份的 --> <select> <option>--请选择月--</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> <!-- 日子 --> <select> <option>--请选择日--</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </td> </tr> <!-- 3 --> <tr> <td>所在地区</td> <td> <input type="text" value="北京思密达" /> </td> </tr> <!-- 4行 --> <tr> <td>婚姻状况</td> <td> <input type="radio" name="marry" checked="checked"/> 未婚 <input type="radio" name="marry" /> 已婚 <input type="radio" name="marry" /> 离婚 </td> </tr> <!-- 5行 --> <tr> <td>学历</td> <td> <input type="text" value="幼儿园"> </td> </tr> <!-- 6行 --> <tr> <td>月薪</td> <td> <input type="text" value="10000-20000"> </td> </tr> <!-- 7行 --> <tr> <td>手机号码</td> <td> <input type="text"> </td> </tr> <!-- 8行 --> <tr> <td>昵称</td> <td> <input type="text" > </td> </tr> <!-- 9行 --> <tr> <td>喜欢的类型</td> <td> <input type="checkbox" name="love" /> 妩媚的 <input type="checkbox" name="love" /> 可爱的 <input type="checkbox" name="love" /> 小鲜肉 <input type="checkbox" name="love" /> 老腊肉 <input type="checkbox" name="love" /> 都喜欢 </td> </tr> <!-- 10 行 --> <tr> <td>自我介绍</td> <td> <textarea> 自我介绍 </textarea> </td> </tr> <!-- 11行 --> <tr> <td></td> <td> <input type="image" src="images/btn.png" /> </td> </tr> <!-- 12 行 --> <tr> <td></td> <td> <input type="checkbox" name="agree" checked="checked" />我同意注册条款和会员加入标准</td> </tr> <!-- 13行 --> <tr> <td></td> <td> <a href="#">我是会员，立即登录</a> </td> </tr> <!-- 14 --> <tr> <td></td> <td> <h3>我承诺</h3> <ul> <li>年满18岁、单身</li> <li>抱着严肃的态度</li> <li>真诚寻找另一半</li> </ul> </td> </tr> </table> </body> </html>
