찾다

집  >  기사  >  웹 프론트엔드  >  HTML 양식이란 무엇입니까? HTML 양식 콘텐츠에 대한 자세한 소개(코드 포함)

HTML 양식이란 무엇입니까? HTML 양식 콘텐츠에 대한 자세한 소개(코드 포함)

不言
不言원래의
2018-07-27 14:17:386010검색

HTML 양식은 다양한 유형의 사용자 입력을 수집하는 데 사용됩니다. 양식은 사용자가 양식에 콘텐츠(예: 텍스트 필드, 드롭다운 목록, 확인란)를 입력할 수 있는 양식 요소가 포함된 영역입니다. 등) 정보 양식을 입력하는 요소는 양식 태그(ff9c23ada1bcecdd1a0fb5d5a0f18437)를 사용하여 정의됩니다.

1. 소개

1. 양식 개념:

양식의 가장 중요한 성능은 클라이언트에서 사용자의 정보를 받은 다음 데이터를 클라이언트에 제출하는 것입니다. 이러한 데이터를 조작하기 위해서는 기술적인 개념에서 기본 데이터 유형인 form 개체를 조작하는 데 사용됩니다. form> 태그는 양식 필드, 버튼 등과 같은 개체를 만드는 데 사용됩니다. . ff9c23ada1bcecdd1a0fb5d5a0f18437 태그에서 여러 속성을 확장할 수 있습니다.
a.action 속성

양식의 데이터를 제출하려면 먼저 양식에 action 속성이 있어야 합니다. 
<form action="some.php">
     </form>

위 코드는 이 양식의 기능이 some.php 페이지의 데이터를 제출하는 것임을 나타냅니다

b.method attribute

이 속성의 기능은 브라우저에 데이터가 어떻게 전달되는지 알려주는 것입니다 이 속성에는 "get"과 "post"라는 두 가지 옵션이 있습니다. 기본적으로 데이터 제출 방법은 get, form입니다. 필드에 입력된 내용은 작업에 의해 지정된 URL에 추가됩니다. 양식을 제출하면 사용자는 명확한 URL을 얻게 됩니다. 이렇게 하면 데이터가 URL에 추가되므로 즐겨찾기에 저장하고 홈페이지의 URL을 공유하고 직접 액세스할 수 있다는 장점이 있습니다. 예를 들어, 사용자가 이미 등록한 일부 웹사이트의 홈페이지를 즐겨찾기에 추가하는 경우 즐겨찾기에서 다시 열면 이미 로그인되어 있음을 알 수 있습니다. 상태. 게시 방법에서는 데이터가 HTTP 헤더 형식으로 전송되며 양식 데이터는 더 이상 URL의 일부가 아닙니다. 둘의 차이점은 get은 모든 양식 필드의 값이 직접 표시된다는 점에서 덜 안전하다는 점입니다. 반면 post는 보이는 처리 스크립트를 제외한 모든 것을 숨길 수 있으므로 실제 애플리케이션에서는 일반적으로 post가 처리 방법으로 선택됩니다


c.name 속성

은 제출된 양식 데이터를 데이터를 처리하는 프로그램에서 인식할 수 있도록 하는 데 사용됩니다. 이 경우, 서로 다른 양식이 제공됩니다. 프로그램이 식별할 수 있도록 이름을 지정하세요

<form name="me">
</form>


...
<script language="JavaScript">
      var length=document.me.length.value;
</script>
코드의 위 부분은 form me를 통해 입력 길이 값을 얻는 방법을 보여줍니다. 코드에는 이름으로 식별할 수 있는 다양한 형식이 있습니다. enctype 속성

이 속성은 HTML 양식 데이터의 인코딩 방식을 나타내며, application/x-www-form-urlencoded(표준 인코딩 방식, 제출된 데이터는 이름/값 쌍으로 인코딩됨), multipart/form-data( 이는 데이터가 정보 조각으로 인코딩되었음을 나타내며, 양식에 대한 MIME 인코딩 방법을 정의하고, 페이지의 각 컨트롤은 메시지의 일부에 해당하는 POST 버퍼를 생성합니다. plain(데이터가 일반 텍스트 형식으로 인코딩됨을 의미하므로 정보는 다음과 같습니다. (컨트롤이나 서식 지정 문자를 포함하지 않음) 총 세 가지 방법이 있습니다

e.target attribute

Target 표시 모드, 대상 URL을 열 위치를 나타내는 4가지 방법을 설정할 수 있습니다. _blank는 새 페이지에서 링크 열기를 의미하고, _self는 동일한 창에서 페이지를 여는 것을 의미하고, _parent는 상위 창에서 페이지를 여는 것을 의미하고, _top은 로드를 의미합니다. 링크가 포함된 창에 페이지를 추가하여 현재 창에 있는 모든 페이지를 대체합니다.

<form action="mailo:depp59@gmail.com"
      method="post"
      name="me"
      enctype="text/plain"
      target="_blank">
...
</form>

이 코드는 다음을 보여줍니다. 이 양식의 작업은 게시물 전송 방법과 me 양식을 사용하여 이메일 depp59@gmail.com으로 보내는 것입니다. 텍스트/일반 인코딩을 사용하여 새 페이지에서 열 수 있습니다



3. 양식 필드 : 사용자가 데이터를 입력하는 곳입니다


양식 필드는 세 가지로 나눌 수 있습니다 개체: 입력, 텍스트 영역 및 선택 대부분의 양식은 입력 속성을 통해 구현되며 선택하여 컨트롤 유형을 생성합니다

2. 입력 개체 아래의 다양한 양식 표현식

페이지에 있는 대부분의 양식은 다음과 같습니다. 입력 태그 입력 

<input name=""
       type=""
       value=""
       size=""
       maxlength="">

a를 통해 구현됩니다. 이름은 입력 데이터의 이름을 나타내며 그 기능은 제출된 데이터

<input type="text" name="length">   这个输入的数据命名为length
  var length=document.me.length.value;

에 표시되는 이름 속성이 누락된 경우입니다. 브라우저는 변경되지 않으며 JavaScript 프로그램은 백그라운드 프로그램 후에 제출된 데이터를 얻을 수 없습니다

b.type属性表示所定义的是哪种类型的表单形式，该属性有九个可选值:

text        单行的文本框
password    将文本替换为"*"的文本框
checkbox    只能做二选一的是或否选择
radio       从多个选项中确定的一个文本框
submit      确定命令文本框
hidden      设定不可被浏览用户修改的数据
image       用图片表示的确定符号
file        设置文件上传
button      用来配合客户端脚本

c.size:表示文本框字段的长度

d.maxlength:表示可输入的最长的字符数量

e.value:表示预先设置好的信息

4.text文本框的样式表单

<html>
<head>
    <title>text样式表单</title>
    <style type="text/css">
        input{
            font:50% 微软雅黑;
        }
    </style>
</head>
<body>
    <form action="some.php" name="myform">
         输入用户名:<input type="text" name="name" size=20 maxlength=12>  <br>
         输入邮箱地址:<input type="text" name="address" size=20 maxlength=20>
    </form>
</body>
</html>

代码中size定义了文本框的长度，而maxlength定义了这个文本框最多只能输入12个字符，如果超出了这个长度数据将不能输入，这两个text样式的数据定义了不同的名字这很关键，否则一旦需要被程序调用数据将无法辨认。

5.password输入密码的样式表单（可以将文本使用保密形式展示出来的一个功能，根据不同的浏览器会使用点状形态或星号符表示）

<html>
<head>
    <title>password样式表单</title>
    <style type="text/css">
        input{
            font:50% 微软雅黑;
        }
    </style>
</head>
<body>
    <form action="some.php" name="myform">
         输入用户名:<input type="text" name="name" size=40 maxlength=12>  <br>
         输入邮箱地址:<input type="text" name="address" size=20 maxlength=20><br>
         输入密码:<input type="password" name="password" size=20 maxlenght=12>
    </form>
</body>
</html>

6.checkbox复选框的表单样式（浏览器会在选择栏前面提供一个小方框如果选择小框中会添加小勾符号表示选中）

<html>
<head>
    <title>checkbox样式表单</title>
    <style type="text/css">
        input{
            font:50% 微软雅黑;
        }
    </style>
</head>
   
<body>
    <form action="some.php" name="myform">
        <h3>注册信息:</h3>
           <input type="checkbox" name="truename" checked="checked">使用真实姓名
        <h3>实名制可以方便您更好地和朋友交流</h3>
           <input type="checkbox" name="address" checked="checked">显示我的地址
        <h3>如果去除勾选，其他用户将无法查到你的地址</h3>
           <input type="checkbox" name="mail"  checked="checked">可以给我发邮件
        <h3>如果勾选，我们将会为您发送来自广告商的信息</h3> 
    </form>
</body>
</html>

上面代码中添加了checked="checked"表示复选框默认值设置为checked,那么√符号会被默认添加

7.radio单选按钮的样式表单（多选一表单）

radio样式类似于选择题，在一组选项中选出唯一的一项，发送这列数据，其中给这组选项定义相同的名字，但是通过value属性   来加以区别，因此，这里必须给input对象设定value值，而且不同对象的value值不能相同，否则数据无法辨认

<html>
<head>
    <title>radio样式表单</title>
    <style type="text/css">
        input{
            font:50% 微软雅黑;
        }
    </style>
</head> 
<body>
    <form action="some.php" name="myform">
       <h3>性别</h3>
           <input type="radio" name="gender" value="one">我是男的<br>
       <h3>请正确选择您的性别哦</h3>
           <input type="radio" name="gender" value="two">我是女滴<br>
       <h3>请正确选择您的性别哦</h3>
    </form>
</body>
</html>

8.submit提交数据的样式表单
   该属性创建一个按钮，该按钮的作用就是提交数据。当点击"提交"按钮时，数据会发送到指定的地方。其中通过value值可以修      改按钮上显示的内容。此外还有一个reset属性，这是一个复位按钮，当被点击时表单的内容会被重新设置，回到页面初始位置

<html>
<head>
    <title>submit样式表单</title>
    <style type="text/css">
        input{
            font:100% 微软雅黑;
        }
    
    </style>
</head>   
<body>
    <form action="some.php" name="myform">
        <h3>性别</h3>
           <input type="radio" name="gender" value="one">我是男的<br>
        <h3>请正确选择您的性别哦</h3>
           <input type="radio" name="gender" value="two">我是女滴<br>
        <h3>请正确选择您的性别哦</h3>
    
           <input type="submit" name="submit" value="确定">
           <input type="reset" name="submit" value="复位">
    </form>
</body>
</html>

9.hidden隐藏域的样式表单
   hidden属性可以创建一个隐藏域，数据会被隐藏起来，用户无法对其进行操作（这些数据通常是用户不关心的但是必须被提交      的数据）
10.image样式的表单（可以看做图像替换按钮的技术，当图像被点击时，数据一并被提交至服务器）
   03280b44b48bc3236e480811d2484a6a
   使用src属性指定这张图像的路径，使用alt属性来添加文本注释，此时提交按钮被替换成一个小小的图像，当点击图像时，其作    用就相当于submit按钮，但是当表单数据被提交的同时，用户所单击的图像的位置坐标（image.x=23 image.y=59）也会被发送
   表单中还有一种触发事件的button表单，它只是一个按钮，单个button按钮并不会提交任何数据，它的作用是用来调用前端页        面，即客户端的脚本程序
   eabf620586791e016436a6bb4b24d47a
11.file上传文件的样式表单
    该表单允许用户上传自己的文件，例如用户上传自己的图像给服务器，用来改变用户在不同网站上的形象图片。需要注意的         是，当使用file样式的表单时，必须在ff9c23ada1bcecdd1a0fb5d5a0f18437标签中说明编码方式，这样服务器才可以接收到正确信息

<body>
    <h3>上传我的文件</h3>
    <form action="some.php" enctype="multipart/form-data" name="myform">
        <input type="file" name="uploadfile"> 
    </form>
</body>

三、textarea对象的表单
   该对象就像是input对象中的text表单，只不过是扩展过的text样式表单，可以通过行(rows)属性和列(cols)属性来编辑文本域的大     小，常见于留言板、论坛中回帖时的文本框等

<html>
<head>
    <title>textarea对象的表单</title>
    <style type="text/css">
        textarea{
            font:100% 微软雅黑;
            color:navy;
        }
    
    </style>
</head> 
<body>
  <form action="some.php" method="post" enctype="multipart/form-data" name="myform">
      <textarea name="some" rows=10 cols=50 value="say">请文明用语:
      </textarea>
  </form>
</body>
</html>

  textarea属性标签必须要封闭，且生成页面时在文本框中会预先设置好文本“请文明用语”，但是用户不得不先删去预先的文本再     编辑自己的内容。当文本框中输入的内容超出预先设置的行数时会自动出现滚动条，如果没有超出文本框的范围则滚动条是灰     色的
四、select对象表单
  使用select将创建一个列表样式的表单，显示为出现一个下拉列表框，令用户可以方便的选择其中一个目录，通常在一些要求填   写地区、生日等信息中，设计者可以给使用者准备好选项，需要使用5a07473c87748fb1bf73f23d45547ab8标签来定义可供选择的每一项

<html>
<head>
    <title>select对象的表单</title>
    <style type="text/css">
        select{
           font:100% 微软雅黑;
           color:Green;
        }
    </style>
</head> 
<body>
   <form action="some.php" method="post" enctype="multipart/form-data" name="myform">
      <h3>地址</h3>
      <select name="上海">
          <option>黄浦区</option>
          <option>虹口区</option>
          <option>静安区</option>
          <option>宝山区</option>
      </select>
   </form>
</body>
</html>

  用户可以通过下拉列表框选择一个“地址”，而这个数据会被表单发送到服务器，此外还可以通过value属性为每一个option指定不   同的值，这样的话value设置的值将取代option的文本内容。注意如果设计者希望预先设置初始值，那么在所希望的option中添加   selected="selected"就可以了，如450007803e5d419b54d7af1162e9a360浦东新区4afa15d3069109ac30911f04c56f3338,否则默认初始值应该是第一个出现的5a07473c87748fb1bf73f23d45547ab8   的文本内容。
  如果下拉列表内内容太多，可以使用5b7a15bed8615d1b843806256bebea72标签配合label属性来给选项分类

<select name="上海">
      <optgroup label="Team1">
          <option>黄浦区</option>
          <option selected="selected">虹口区</option>
          <option>静安区</option>
          <option>宝山区</option>
      </optgroup>
      <optgroup label="Team2">
          <option>长宁区</option>
          <option>杨浦区</option>
          <option>徐汇区</option>
          <option>普陀区</option>
      </optgroup>        
</select>

    此外如果不希望select对象以下拉列表框的形式展现出来，有一种方式可以将目录项以滚动条的样式表现出来，只需要在select     标签中加入size属性，如"size=6"表示是一个能容纳6行文字的文本框，当目录项超出设置的行数时将出现滚动条

<select name="上海" size="5">
        <option>黄浦区</option>
        <option selected="selected">虹口区</option>
        <option>静安区</option>
        <option>宝山区</option>
        <option>长宁区</option>
        <option>杨浦区</option>
        <option>徐汇区</option>
        <option>普陀区</option>        
</select>

五、表单域集合
   如果表单的项目过多或为了修饰表单部分，可以通过使用表单域将表单分组，表单域的代码由2b5469ab79cf842344327415c3b3bb95标签和e911751791aa3ba95dc724e2fb905976标签组    合而成，默认情况下，2b5469ab79cf842344327415c3b3bb95标签勾画出表单域的框形，e911751791aa3ba95dc724e2fb905976标签的对象像标题一样出现在框的左上角

<html>
<head>
    <title>表单域</title>
</head> 
<body>
  <form action="some.php" method="post" name="myform">
     <fieldset>
          <legend>注册信息:</legend>
          输入用户名:<input type="text" name="name" size=20 maxlength=12>
          <!--这里可以放入许多样式的表单-->
     </fieldset>
  </form>
</body>
</html>

 相关推荐：

HTML 表单

HTML FORM 表单_html/css_WEB-ITnose

위 내용은 HTML 양식이란 무엇입니까? HTML 양식 콘텐츠에 대한 자세한 소개(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

관련 기사

더보기