이 비디오에서 우리는 사용자 입력을 얻는 세 가지 추가 방법에 대해 이야기 할 것입니다.
첫 번째 라디오 버튼은 실제로 우리가 본 입력 태그의 또 다른 유형입니다.
확인란과 비슷합니다.
다음 select 태그는 우리가 드롭 다운 메뉴를 얻는 방법입니다.
마지막으로 여러 줄로 된 텍스트 입력을 만드는 방법 인 텍스트 영역에 대해 이야기하겠습니다.
그래서 나는 표준 HMO 상용구로 시작하겠습니다.
계속해서 제목을 추가하여 저장하고 라디오 버튼을 추가하십시오.
따라서 라디오 만 입력하기 만하면됩니다.
그리고 저는 그것을 복제 할 것이고 다른 하나의 유형을 줄 것입니다. 왜냐하면 체크 박스만으로 그것들을 나란히 볼 수 있기 때문입니다.
여기는 라디오 버튼입니다.
내가 선택한 후에는 해제 할 수 없습니다.
이 체크 박스는 켜고 끌 수 있습니다.
차이점은 실제로 사용자가 선택할 수있는 확인란을 선택하거나 사용자가 확인할 수있는 5 가지 선택 항목이 있다고 가정 해 보겠습니다.
우리가 사용자들에게 그들을 선택하도록 요구한다고 가정 해 봅시다.
이것은 직업 사이트이며 우리는 그들이 기술을 선택하기를 원합니다.
우리는 그들에게 자바 스크립트를 말하고 HMO 또는 자바 스크립트로만 볼 수 있고, 라디오 버튼을 체크하고 체크하는 체크 박스 만 허용하기를 원합니다.
그러나 일반적으로 사용자가 하나의 선택을 할 때 사용됩니다.
따라서 일반적으로 웹 사이트의 예는 남성 또는 여성 또는 기타를 확인하도록 요구하는 성별과 같아야합니다.
그리고 한 가지 선택 만 할 수 있습니다.
당신은 선택할 수 없다는 것을 알 수 없습니다.
요소 중 하나를 선택해야합니다. 예를 들어 고양이 또는 개를 선호하는 경우 사용자가 선택하는 양식이 있고 두 가지를 모두 선택할 수있는 옵션은 없습니다.
불행히도이 세상에서 그것은 검은 색이나 흰색 중 하나를 선호 고양이 우리가 선호하는 개.
그래서 우리는 두 개의 라디오 버튼을 갖게 될 것입니다.
그리고 그것이 우리가 시작하는 전부라면 하나를 선택할 수 있고 다른 하나는 선택할 수 있습니다.
우리가 원하는 것은 아닙니다.
나는 오직 하나를 고를 수 있기를 원한다.
따라서 내가하고 싶은 첫 번째 일은 양식을 작성하는 것입니다. 양식을 입력 양식으로 옮길 것입니다.
그리고 지금 당분간은 그냥 요청을 받고 단지 페이지를 새로 고치는 기본 동작이되도록 그냥 두려고합니다.
다음에 할 일은 레이블을 몇 개 추가하는 것입니다. 그래서 나는 개가 될 수 있도록 4 가지 구문을 사용합니다.
그리고 우리는 우리의 의견과 I.D. 개.
그러나 그것들은 일치해야합니다.
여기 같은거야.
고양이와 이드 고양이를위한 또 다른 라벨 태그.
이제 신선하면 두 가지 선택이 있습니다.
그러나 나는 여전히 둘 다 선택할 수 있습니다.
그래서 우리가해야 할 일은 두 개의 라디오 버튼이 같은 선택을하는 방법을 알려주므로 하나 또는 둘 다를 선택할 수 있지만 한 가지 결정입니다.
그렇게하기 위해서는 name 속성을 사용해야합니다. name 속성은 개별 입력에 이름을 부여하지만 mL은이를 참조 할 수 있으며 이름이 중요한 HGP 요청에 저장되거나 전송되는 방식이기도합니다.
여기에 이름을 지어 보겠습니다.
첫 번째 이름은 그냥 애완 동물 선택이라고하겠습니다.
그런 다음 여기에 입력 할 때도 똑같은 이름을 지정하려고합니다.
그리고 우리가 당신이 볼 수있는 이유는 바로 그들에게 같은 이름을 부여함으로써 그것들을 연결 시켜서 우리가 지금 하나를 선택할 수있게하는 것입니다.
우리가 새로 고침하면.
나는 개와 고양이를 클릭 할 수 있지만 둘 다 할 수는 없다.
그리고 내가 한 가지 더 보여 드리겠습니다.
양식의 끝에 버튼을 추가합시다.
그리고 지금까지 보았던 것은 실제로 입력 유형이 양식 하단에있는 같음을 보여 주지만 버튼이 양식의 마지막 항목이면 양식을 제출할 것임을 보여주는 버튼을 보여줍니다. .
따라서 제출할 최종 또는 입력 유형의 끝 버튼에 실제로 양식을 제출하는 입력 방법에는 몇 가지가 있습니다.
이제 개들을 고르자.
거기 유일한 유일한 선택.
다른 입력과 마찬가지로 쿼리 문자열에서 무엇인가를 볼 수 있도록 이름이 애완 동물 선택이라는 것을 기억하십시오.
내가 클릭 할 때 우리는 애완 동물 선택과 같거나 그 다음에 O N을 보거나 실제로는 기대했던 것과 다릅니다.
그래서 우리는이 결정의 가치가 무엇인지 말할 필요가있는 한 가지를 놓치고 있습니다.
그래서 그 값 속성 안에 value 태그를 추가하십시오.
그리고 그냥이 값이 개가 될 것이라고 말하며이 고양이는 고양이가되어 어디에서 왔는지를 볼 수 있도록 모든 대문자가됩니다.
승인.
따라서 사용자가 애완 동물 선택 저장소에있는 개를 클릭하면 사용자가 값을 제출하거나 고양이를 클릭하거나 애완 동물 이름을 선택하면 값 대문자가 모두 대문자로 저장됩니다.
그래서 당신에게 보여주기 위해 개를 클릭하자. 그리고 우리는 애완 동물 선택을 개와 같게 만든다.
우리가 고양이를하면 우리는 고양이 때문에 애완 동물 선택을 얻습니다.
그래서 우리가 이야기 할 다음 요소는 select 태그이고 select 태그를 사용하면 좋은 드롭 다운 메뉴를 만들 수 있습니다.
그래서 태그 이름이 호출됩니다.
그것은 단지 선택입니다.
시작 및 종료 태그입니다.
그리고 그저 그렇게하면 슬라이드가되고 내 페이지가 새로 고칩니다.
실제로 이미 드롭 다운 메뉴가 있습니다.
그것은 완전히 비어 있습니다.
select 태그와 함께 옵션 태그를 사용합니다.
그래서 우리가 사용하고자하는 가능한 모든 옵션을 위해 내부에 옵션 태그를 추가합니다.
이제 사용자가 자신이 좋아하는 색상을 선택하도록하는 드롭 다운을하고 여기에서 몇 가지 옵션을 시도해 보겠습니다.
빨간색 오렌지와 노란색입니다.
당신이 볼 수 있듯이, 우리는 이미 우리의 선택으로 여기에 좋은 드롭 다운을 얻습니다.
그리고 내가 쳤다면 오렌지를 선택하고 나는 쳤다.
당신은 우리가 실제로 아무 것도 얻지 않는다는 것을 알게 될 것입니다. 우리가 개를 골라서 이번에 노란색으로 선택하면 그들이 우리를 좋아해요.
나는 여전히 애완 동물 선택 만받습니다. 왜냐하면 우리가 제공하는 이름이 없기 때문입니다.
그래서 우리 선택에 우리는 이름을 지어주고 그냥 fav라고 부르며 그냥 색으로 가자.
그리고 내 페이지를 새로 고침하여 고양이를 클릭하자. 노란색을 클릭하고 여기를 클릭하면 내가 쳤다.
나는 지금 애완 동물 선택 고양이를 얻고 색깔은 황색이다.
그래서 당신이 볼 수있는 것은이 경우 노란색 맵을 선택한 옵션에 따라 브라우저는 텍스트가 그 옵션 안에 있다는 것을 취하고 이름 색상 아래 값으로 보냅니다.
따라서 우리는 항상 요청에 포함 된 값이 드롭 다운의 사용자에게 표시되는 것과 동일하도록 항상 원하지는 않습니다.
예를 들어 사용자가 기분을 선택하기를 원하면 현재의 기분은 무엇이라고 말하며 행복한 얼굴을 원합니다.
가장 감정이없는 얼굴과 슬픈 얼굴.
그리고 우리는이 이모티콘으로이 멋진 드롭 다운을 끝내지 만, 사용자가 행복을 선택할 때 우리는이 모든 것을 보내기를 원하지 않는다고 가정 해 봅시다.
대신 우리는 행복하다는 말을 보내기를 원하거나 그렇게하기 위해 보낸 말을 원합니다.
값 태그 인 값 태그를 사용합니다.
그래서 우리는 가치가 같다고 말할 것입니다.
해피가 중립이고 값이 같다고 가정 해 봅시다.
이제 내가 올바른 강아지를 새로 고치면 밖에 나가서 클릭하십시오.
당신은 애완 동물 선택을 얻을 수있는 것을 볼 수 있고, 색깔은 똑같다고합니다.
그리고 물론 우리가 그 이름을 변경하고자하는 색으로 유지했기 때문에 그것은 우리의 마크 업이 의미 있고 실제적으로 의미가 있도록합니다.
그래서 고양이는 너무 행복하고 기분은 행복과 같습니다.
승인.
따라서 선택에 대해 알아야 할 것이 전부입니다.
또 다른 한 가지는 텍스트 영역 태그와 텍스트 영역입니다.
나는 그것을 인도에 올려 놓을 것이고, 한 줄 이상의 입력을 만드는 좋은 방법이다.
따라서이 입력 유형과 같은 텍스트 입력이 텍스트와 같고 한 줄임을 알았습니다.
그러나 사용자에게 바이오를 요청하거나 잘 작동하지 않는 이력서 및이 매우 얇은 짧은 입력을 복사하여 붙여 넣기를 원할 경우 어떻게 될까요?
그래서 textarea 실제로 select와 같은 또 다른 태그입니다.
따라서 유형이있는 입력이 아닙니다.
사실 그것은 별도의 형식 컨트롤입니다.
그리고 그것이 작동하는 방식에는 두 가지 중요한 부분이 있습니다.
첫 번째는 텍스트 영역 태그를 만들고 그 자체로이 텍스트 영역을 제공한다는 것입니다.
그러나 우리가 할 수있는 것은 텍스트 영역이이 두 속성 행과 열을 얼마나 정확하게 사용 하는지를 지정하는 것입니다.
그래서 여기에 보여 드리죠.
10 행 50 열로 시작하여 내 텍스트 영역이 양방향으로 확장 된 것을 볼 수 있습니다.
그러나 그것은 분명히 더 넓어졌습니다.
이제 100 행을 원한다고 가정 해 봅시다. 그러면 훨씬 길어질 수 있습니다.
따라서 기본적으로 텍스트 영역의 크기를 변경할 행 수와 열 수를 지정할 수 있습니다.
그것에 관한 한 가지 다른 점은 이러한 다른 요소들과 마찬가지로 10에서 10 사이의 작은 요소로 돌아가는 것입니다.
요청에서이 데이터를 보내고 싶다면 다른 요소와 마찬가지로이 입력을 제거해 봅시다.
나는 그것에게 이름과 같은 이름을 부여 할 필요가 있고, 단지 단락이 어떤 텍스트로이 단락을 채우라고 말하자.
나는 클릭하고 당신은 이것을 보거나 확장 할 수있다.