表单是什么意思?表单制作

来源网友投稿 1415 2022-07-04

表单在页面中关键负责数据收集作用。一个表单有三个基本上组成部分: 表单标志:这里边涵盖了解决表单数据常用CGI程序流程的URL及其数据提交到云服务器的方式 。 

表单域:包括了输入框、登录密码框、掩藏域、多行文本框、勾选框、单选框、下拉选择框和上传文件框等。 表单按键:包含提交按键、校准按键和一般按键;用以将数据传输到网络服务器上的CGI脚本制作或是撤销键入,还能够用表单按键来调节别的界定了解决脚本制作的处置工作中。编码表单标志作用:用以声明表单,界定收集数据的范畴,也就是和里边含有的数据将被提交到网站服务器或是电子邮箱里。英语的语法:. . .特性表述见下表:action=url用于特定解决提交表单的文件格式。它还可以是一个URL详细地址(提交给程序)或一个电子邮箱详细地址。method=get或post指出提交表单的HTTP方式 。


image.png

1.数据表格的作用及组成

作用:显示数据,展示数据

组成:

<table>用于定义表格的标签

    <tr>行

           <th>内容<th>表头单元格

           <td>内容</td>单元格

           <td>内容<td>单元格

             ....

    <tr>

</table>

1.<table></table>是用于定义表格的标签

2.<tr><tr>标签用于定义表格中的行,必须嵌套在<table></table>标签里面

3.<td></td>用于定义表格中的单元格,必须嵌套在<tr><tr>标签中

4.td代表表格数据(tabledata),即数据单元格的内容

5.<th>标签表示html表格的表头部分,一般位于第一行或第一列,表头单元格文本自动加粗

6.补充标签:<thead></thead>:用于定义表格的头部,<thead>标签内必须拥有<tr>标签,一般是位于第一行

<tbody></tbody>:用于定义表格的主体,主要用于放数据本体

7.以上标签都是放在<table></table>当中

2.表格的相关属性 

width="宽"     height="高"

border=“添加表格边框,表格边框大小”

cellspacing="单元格间距离"

cellpadding="单元格与内容之间的距离"

bgcolor="表格背景色“

align="表格对齐方式"(left/center/right)

合并单元格属性:

colspan="所要合并单元格列数”合并列,左右合并

rowspan="所要合并单元格行数”合并行,上下合并   

3.合并单元格三部曲 

1.先确定合并行还是合并列 

2.找到目标单元格,写上合并方式=合并的单元格数量,比如:<td colspan="2"></td>

3.删除多余的单元格

表单制作

1.表单的作用:用来收集用户信息。

 在html当中,一个完整的表单通常由,表单域、表单控件(也称为表单元素)、和提示信息3部分 组成

2.表单域:method提交方法  提交方式(post,get)

   <form action="#" name=“表单名称” method="post" >

   各种表单元素控件

   </form>

get和post的区别:

1. Get是不安全的,因为在传输过程,数据被放在请求的URL中;Post的所有操作对用户来说都是不可见的。 2. Get传送的数据量较小,这主要是因为受URL长度限制;Post传送的数据量较大,一般被默认为不受限制。 3. Get限制Form表单的数据集的值必须为ASCII字符;而Post支持整个ISO10646字符集。 4. Get执行效率却比Post方法好。Get是form提交的默认方法。

3.文本框

  <input type ="text" value="默认值“  placeholder="输入框内容/ maxlength="限制输入数量 >

4.密码框

  <input type="password"/ “  placeholder="输入框内容  maxlength="限制输入数量>

5.提交按钮

  <input type="submit" value="按钮内容"/>

6.重置按钮

  <input type="reset" value="按钮内容"/>

7.禁用按钮 disable="disabled"(简写disabled)

8.默认选项 checked="checked"(简写checked)

9.下拉菜单

  <select>

<option>菜单内容</option>

<option>菜单内容</option>

<option  selected(默认选中)>菜单内容</option>

 <option  disabled(禁选)>菜单内容</option>

  </select>

selected默认  disabled禁选

10.多行文本框

     <textarea></textarea>  

11.占位   placeholder="内容"

12.按钮   <input type="button" value="按钮内容"/>

               button:只起到跳转作用,不进行提交,后期配合JS搭配使用。

               submit:是提交按钮 起到提交信息的作用

               file:文件域,使用场景,上传文件使用 <input type="file" value="按钮内容"/>

13.单选框

男<input type="radio" name="ral" value="男“/>

女<input type="radio" name="ral" value="女“ />

单选按钮里的name属性必须写,同一组单选按钮的name属性值必须一样。

14.复选框

<input type="checkbox" name="like" value="默认值“/>

<input type="checkbox" name="like" disabled="disabled">

(disabled="disabled" :禁用)

(checked="checked" :默认选中)

男<input type="radio" name="ral" value="默认值“ checked="checked" />

15.<lable>标签

     <lable>标签为input元素定义标注(标签)

      <lable>标签用于绑定一个表单元素,当点击<lable>标签内的文本时,浏览器就会自动将焦点(光标)          转到或者选择对应的表单元素上,用来增加用户体验

语法:<input type="radio" name="sex" id="sex"><lable for="sex" >男</lable>

核心:lable标签的for属性应当与相关元素的id属性相同

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:WPS表格怎么通过设置单元格格式实现内容数据填充
下一篇:怎样删除wps文字表格中的虚线框
相关文章