What is an HTML form? Detailed introduction to HTML form content (with code)-HTML Tutorial-php.cn

HTML forms are used to collect different types of user input. A form is an area containing form elements; form elements allow users to enter text fields in the form (such as text fields, drop-down lists, radio buttons, check boxes, etc. etc.) element for entering information; forms are defined using the form tag (

1. Introduction

##1. Form concept:

The most important performance of the form is to receive the user's information on the client, and then submit the data to the background program to manipulate the data. From a technical concept, the form It is used to operate the form object, which is a basic data type

2. Create a form:

Forms are created through the tag, in which form objects such as form fields, buttons and other things are placed. Several attributes can be extended in the tag:

a.action attribute

The form defined through the tag must have an action attribute before the data in the form can be submitted

<form action="some.php">
     </form>

Copy after login

The above code indicates that the function of this form is to submit the data of some.php page

##b.method attribute

The function of this attribute is to tell the browser how the data is submitted. There are two options under this attribute: "get" and "post". By default, the method of data is submitted. It is get. The content entered in the form field will be added to the URL specified by the action. When the form is submitted, the user will get a clear URL. Since the data will be added to the URL in this way, the advantage is that it can be saved in the collection. Sharing with others in the folder, directly accessing the URL of the homepage can achieve the same effect as filling in the registration. For example, sometimes, users add the homepages of some websites that they have registered to their favorites, and when they open them from their favorites again , you will find that you are already logged in. In post method, the data will be sent in the form of HTTP header, and the form data is no longer part of the URL. The difference between the two is that get is less secure in that the values of all form fields are displayed directly, while post can hide everything except the visible processing script, so post is usually the processing method chosen in actual applications.

c.name attribute

The function is to enable the submitted form data to be recognized by the program that processes the data. There may be more than one form placed in most pages. At this time, you need to give different names to different forms so that the program can identify them

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


...
<script language="JavaScript">
      var length=document.me.length.value;
</script>

Copy after login

The above part of the code explains how to get the input length value through the form me. The code There are different forms in which can be identified by name

d.enctype attribute

This attribute represents HTML form data The encoding methods include application/x-www-form-urlencoded (standard encoding method, submitted data is encoded as name/value pair), multipart/form-data (indicates that the data is encoded as a piece of information, and MIME is defined for the form The encoding method creates a POST buffer that is different from the traditional one. Each control on the page corresponds to a part of the message) and text/plain (which means that the data is encoded in the form of plain text, so that the information will not contain controls or formats. characters) in three ways

e.target attribute

Target display mode, indicating where to open the target URL, you can Set 4 ways, _blank means opening the link in a new page, _self means opening the page in the same window, _parent means opening the page in the parent window, _top means loading the page into the window containing the link, replacing any currently in The page in the window.

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

Copy after login

This code indicates that the action of the form is to send it to the email depp59@gmail.com, using the post transmission method and the me form using text/plain encoding, so that it can be displayed in the new Open the page

3. Form field: where the user inputs data
The form field can be divided into three objects: input, textarea, and select. Most of the forms are implemented through the input attribute. Textarea and select create a control type

2. Multiple form expressions under the input object Most forms on the page are implemented through the input tag input

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

Copy after login

a .name represents the name of the input data. Its function is to allow the program to understand the submitted data

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

Copy after login

If such a name attribute is missing, although there will be nothing displayed in the browser Change, but the JavaScript program cannot obtain the submitted data after the background program

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>

Copy after login

代码中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>

Copy after login

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>

Copy after login

上面代码中添加了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>

Copy after login

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>

Copy after login

9.hidden隐藏域的样式表单
hidden属性可以创建一个隐藏域，数据会被隐藏起来，用户无法对其进行操作（这些数据通常是用户不关心的但是必须被提交的数据）
10.image样式的表单（可以看做图像替换按钮的技术，当图像被点击时，数据一并被提交至服务器）

使用src属性指定这张图像的路径，使用alt属性来添加文本注释，此时提交按钮被替换成一个小小的图像，当点击图像时，其作用就相当于submit按钮，但是当表单数据被提交的同时，用户所单击的图像的位置坐标（image.x=23 image.y=59）也会被发送
表单中还有一种触发事件的button表单，它只是一个按钮，单个button按钮并不会提交任何数据，它的作用是用来调用前端页面，即客户端的脚本程序

11.file上传文件的样式表单
该表单允许用户上传自己的文件，例如用户上传自己的图像给服务器，用来改变用户在不同网站上的形象图片。需要注意的是，当使用file样式的表单时，必须在标签中说明编码方式，这样服务器才可以接收到正确信息

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

Copy after login

三、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>

Copy after login

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

<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>

Copy after login

用户可以通过下拉列表框选择一个“地址”，而这个数据会被表单发送到服务器，此外还可以通过value属性为每一个option指定不同的值，这样的话value设置的值将取代option的文本内容。注意如果设计者希望预先设置初始值，那么在所希望的option中添加 selected="selected"就可以了，如,否则默认初始值应该是第一个出现的标签配合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>

Copy after login

此外如果不希望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>

Copy after login

五、表单域集合
如果表单的项目过多或为了修饰表单部分，可以通过使用表单域将表单分组，表单域的代码由

标签和标签组合而成，默认情况下，

标签勾画出表单域的框形，标签的对象像标题一样出现在框的左上角

<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>

Copy after login