HTML表单

1. 创建表单

每个表单都以 form 开始标签开始,以 form 结束标签结束。两个标签之间是组成表单的说明标签、控件和按钮。每个控件都有一个 name 属性,用于在提交表单时对数据进行识别。form 开始标签可以有一些属性,其中最重要的就是 action 和 method。将 action 属性的值设置为访问者提交表单时服务器上对数据进行处理脚本的 URL。method 属性值要么是 get,要么是 post。大多情况下是 post。

  <form method="post" action="xxx.php">
  </form>

对表单元素进行组织:如果表单上有很多信息需要填写,可以使用 fieldset 元素(类似一个边框)将相关的元素组合在一起,使表单更容易理解。还可以使用 legend 元素为每个fieldset 提供一个标题,用于描述每个组的目的(有时还可以使用 h1~h6)。

<form action="">
<fieldset>
    <h1>...</h1>
</fieldset>

<fieldset>
    <h2>...</h2>
    <div>
        <fieldset><div class="">
            <legend>小标题</legend>
        </div></fieldset>
    </div>
</fieldset>

</form>

2.创建文本

 

文本框可以包含一行无格式的文本,它可以是访问者想输入的任何内容,通常用于姓名、地址等信息。每个文本框都是通过带有 type = "text" 的 input 标签表现出来的。除了 type 之外还有些其他可用的属性,其中最重要的就是 name。服务器端的脚本使用你指定的 name 获取访问者在脚本文本框中输入的值或预设的值(即 value 属性值)。

创建文本框步骤:

  • 1)输入用于让访问者识别文本框的标签:标签描述的是表单字段用途的文本,label元素有一个特殊属性:for。如果 for 的值与一个表单字段的 id 值相同,该 label 就与该字段显示的关联起来。

    <label for = "idlabel"> Last Name:</label>

 

  • 2)输入 <input type = "text",表示文本框,然后在输入 name = "dataname"用于让服务器脚本识别输入数据的文本

 

 

  • 3)设置 id = "idlabel",这里跟 1)步中的 for 属性值一样,使得具有显示文本框的 label 元素关联。(id 和 for 属性设置相同并不是必须的)。

 

 

  • 4)如果需要,输入 value="default",这里 default 是这个字段最初默认显示的数据。

 

 

  • 5)如果需要,输入 placeholde = "hinttext",这里的 hinttext 是这个字段中最初显示的数据,用于指导用户输入,当 input 元素获得焦点时,这些文本就会消失。用户输入内容。

 

 

  • 6)如果需要,输入 required = "required",表示仅在这个字段有值的情况下才能提交表单。

 

 

  • 7)如果需要,输入 autofocus 或 autofocus = "autofocus"。如果这是第一个拥有此属性的表单控件,input 元素在页面加载时默认会获得焦点。

 

 

  • 8)如果需要,输入通过输入 size="n"定义文本框的大小,这里 n 是文本框宽度,以字符为单位。

 

  • 9)如果需要,输入 maxlength="n",这里 n 是该文本框允许输入的最大字符数。

 提交表单   Last Name:

   <fieldset>
  <legend> 提交表单 </legend>
  <label for = "idlabel"> Last Name: </label>
  <input type = "text" id = "idlabel" name = "dlabel" class = "field-large"
   required autofocus />
   </fieldset>

让 for、id 和 name 属性值都一样是一种并非必须但是很常见的做法(单选框和复选框例外,对它们来说有一组 input 会使用同一个 name,而 id 对每个 input 来说都是唯一的)。

3.创建密码框

创建密码框的步骤和创建文本大致相同,唯一区别的地方在于 type 的值变为 type = "password"。密码框中输入的文本会使用圆点或星号隐藏。

 <fieldset>
  <legend> 提交表单 </legend>
 <label for = "idlabel"> Last Name: </label>
 <input type = "password" id = "idlabel" name = "dlabel" class = "field-large"
   required autofocus />
 </fieldset>

创建电子邮件框、搜索框、电话框和URL框

同创建文本的步骤相同,唯一区别的地方在于type属性值的变化。

电子邮件:type = "email";
搜索框:type = "search";
电话框:type = "tel";
URL框:type = "url";

4. 创建单选按钮

 

对 input 元素设置 type = "radio" 即可创建单选按钮。然后输入 name 和 value 值,如果需要输入 checked 或者 checked = "checked" 让该单选按钮在页面打开时默认处于激活状态。一组单选按钮只能有一个按钮添加该属性。

Male

     <input type = "radio" name = "gender" value = "Male" />
     <label for = "idgender"> Male </label>

5.创建复选框

在一组单选按钮中,只允许选择一个答案;但在一组复选框按钮中,访问者可以选择任意数量的答案。

  • 1)输入 input type = "checkbox",

  • 2)输入 name = "boxset,id = "idlabel",value = "data"

  • 3)输入 checked 或 checked = "checked",让该复选框在页面打开时默认处于选中状态。

  • 4)输入 label for = "idlabel"

It‘s okay to ...emali me with ...messages from other ...

 <input type = "checkbox" id = "email- ok" 
 name = "email - signup" value = "user- emails" />
<label for = "email- ok" > It‘s okay to ...</label>
  
   <input type = "checkbox" id = "email-ok- to" 
   name = "email - signup" value = "user- emails- to" />
 <label for = "email- ok-to" > emali me with ...</label>
 
  <input type = "checkbox" id = "email- ok- three" 
  name = "email- signup" value = "user- emails- three" />
 <label for = "email- ok- three" > messages from other ...</label>

6.创建文本区域:

 

如果希望填写问题或评论的空间,可以使用文本区域。

  • 1)输入 textarea

  • 2)输入 id = "idlabel",输入 name = "dataname"

  • 3)如果需要,输入 maxlength = "n"

  • 4)输入 cols = "n" 这里n是文本的宽度,输入 rows = "n"这里 n 是文本区域的高度。

    <textarea name = "bio" id = "bio" cols = "40" rows = "10"> </textarea>

    7.创建选择框

    选择框用于向访问者提供一组选项,从而允许从中选择。通常呈现为下拉菜单样式,如果允许用户选择多个选项,选择框就会呈现为一个带滚动条的项目框。

 

  • 1)输入 select

 

 

  • 2)输入 id = "idlabel",输入 name = "dataname"

 

 

  • 3)如果需要,设置 size="n",这里 n 代表选择框的高度

 

 

  • 4)如果需要,输入 multiple 或者 multiple = "multiple",从而允许访问者选择一个以上的菜单选项(选择时需要按住 Control 键或 Command 键)。

 

 

  • 5)输入 option

 

 

  • 6)输入 value = "optiondata" 选项选中后要发送给服务器的数据

 

  • 7)如果需要输入 selected 或者 selected = "selected",指定该选项默认被选中。输入希望出现在菜单中的名称。
    <select name = "state" id = "state">
    <option value = "Al"> Alabama </option>
    <option value = "Ak"> Alsska </option>
    <option value = "GS"> GSLYYDS </option>
    </select>

    8.让访问者上传文件

    有时需要让网站的用户向服务器上传文件(如照片。简历)。

 

  • 1)输入form method = "post" enctype = "multipart / form-data" enctype 属性可以确保文件采用正确的格式上传

 

 

  • 2)接下来,输入 action = upload.url。要上传的文件路径

 

 

  • 3)为文件上传区域输入标签

 

 

  • 4)输入 input type = "life"创建一个文件上传框和一个按钮,

 

 

  • 5)输入id = "idlabel",输入name = "dataname",如果需要,设置size = "n"

 

  • 6)如果需要,输入 multiple 或者 multiple = "multiple"
    <form method = "POST" action = "xxx.php" enctype = "multipart / form- data">
    <fieldset>
    <legend> 请上传 </legend>
    
     <label for = "picture"> Picture: </label>
    <input type = "file" id = "picture" name = "picture" />
    </fieldset>

    9.创建隐藏字段

    隐藏字段可以用于存储表单中的数据,但它不会显示给访问者。可以认为它们是不可见的文本框,通常用于储存先前的表单收集信息,以便将这些信息同当前的数据一起交给脚本处理。input type = "hidden",输入name = "dataname",value = "data"。

    10.创建提交按钮

    输入的信息如果不发送到服务器,就没什么用,应该总是为表单创建提交按钮,让访问者可以将信息交给你。提交按钮可以是文本。图像或二者结合。

    输入 input type = "submit.如果需要输入 value = "submit mesage" 将要出现在按钮上的文本。

    <input type = "submit" value = "GSL">

    创建带图像的提交按钮

  • 1)创建PNG、GIF、或JPEG图像。
  • 2)输入 input type = "image"
  • 3)输入 src = "image.url",这里 image.url 是图像在服务器上的位置。
  • 4)输入 alt = "text",当图像无法显示时需要出现的文本
    <input type="image" src="xxx.png" width="188" height="95" alt="Create Profile" />

    创建结合文本和图像的提交按钮:使用 button 元素可以创建包含其他HTML元素的按钮(存在兼容性问题)输入 button type = "submit"

    <button type = "submit" class = "btn">
    <img src = "xxx.png" width = "21" height = "21" alt ="">
    Create Profile 
    </button>

    11.禁用表单元素

    在某些情况下,你可能不想让访问者使用表单中某些部分,例如在所有必填信息完成之前禁用提交按钮。

    方法:在表单元素的开始标签后 输入 disabled 或者 disabled =" disabled"。

    12.根据状态为表单设置样式

    可能需要根据表单状态是否必须包含某个属性设置不同的样式。

  • :focus 获得焦点字段
  • :checked 选中的单选按钮或复选按钮、
  • :  disabled 具有 disabled 属性的字段、
  • :  enable 与  disabled 相反、
  • :required 具有 required 属性的字段
  • :optional 与 required 相反、
  • :invalid 其值与 pattern 属性给出的模式不匹配的字段,或不是有效电子邮件个税,URL 格式等、
  • :valid 与 invalid 相反
    <style>
     input : focus{
        background-color : greenyellow;
     }
     textarea : disabled{
       background-color : #ccc;
       border-color : #999;
       color : #666;
      }
    </style>

     

HTML表单

上一篇:如何使用.Net Core CLI安装依赖项


下一篇:读《PyTorch + NumPy这么做会降低模型准确率,这是bug还是预期功能?》