html表单中文本区域的默认行数,表单标签元素 - 尼农小道

作用:

给用户提供一个界面(前台界面),让用户填写相应的信息,对用户提交的信息进行收集、分类、与用进行交互。

表单的工作流程:

1、用户在具有表单的页面填写数据

2、将数据提交至后台(.php) 例如uli.php

3、后台(.php)接收数据后进行验证,如果验证通过,则写入数据库或从数据库将数据读出,再返回给客户端。

语法格式:

常用的属性:

1、action 用于设置表单数据处理页面(.php)

2、method 用于设置提交方式,有以下两种方式

get 默认方式

特点:

所有的数据都会被组织成名值对的形式使用url进行传递。

不安全

传递的数据类型单一

传递的数据量小

post

特点:

所有的数据都会被组织成名值对的形式放在协议内部传递

相对安全

传递的数据类型多样

传递的数据量大

3、enctype 用于设置数据的传递方式(可选)(此属性只有在method属性设置为post时才有效)

取值:

1、application/x-www-form-urlencode (默认值是该选项,可以缺省不写)用于传递文本数据

2、multipart/form-data:如果表单包含用于文件上传的控件(input type="file"),那么这个属性值必须设为multipart/form-data

表单元素

就是为用户提供一个可输入的区域。

输入类型控件

type: 设置不同类型的表单元素(输入区域)

64f60b9589d970a27f4266fdc31b8bf3.png

取值:

text:单行文本框

作用:给用户填写用户名等信息,填写一些文本信息

size:控制输入框显示的文字多少,控制了单行文本框宽度

9825f0aceddece4bfae0dce2cb0527e4.png

password

·主要用于,密码等不方便显示的信息的控制···

会将我们输入的文本相关的内容在显示的时候替换成例如实心原点的表示方式

a52a02831a3a8fde3fb99cd754efe4d4.png

radio 单选按钮:

一组单选按钮中,input的属性name的值要保持统一

注意:如果要预先设置显示的选项,可以增加一个checked="checked"

ad06cabb89c118e32a9491fcbd87af22.png

b698276953042defdbc3cbaf4420f941.png

checkbox复选按钮

input表单的属性有:

type:设置为checkbox

注意:

一组复选按钮中,所有的name属性的属性值设置为形同的值,并且要在属性name的属性值后面统一都分别加一个[]

d5d895a3a46e591bd582e8d039782515.png

c85be8a16684bff9298435dbde3a7f18.png

submit

4f08b031c96d8954360fc87157a3f178.png

file

设置文件上传

Type:指定上传文件的类型,如:type="file"

Name:指定该元素的名称

565bd2c39a69b2ad870b0f9bf8f1441c.png

hidden

不是给用户填写用的输入框或者其他选择等控件

作用是设置一个隐藏域,给接收程序提交一些数据,传一些参数

6449e63eb7246acaebd178d25180918f.png

image 用于设置一个图片提交按钮

属性说明:

type:设置为image

src:引入需要设置的图片资源,

width:设置宽度

height:设置高度

title:设置按钮的提示信息

9ac253308d5cc0fc3369cbc5e855ea69.png

reset

重置按钮:作用:如果当用户填写的内容有误需要从新填写时,将我们已经填写或者选择的内容进行初始化。

5145e2d4fa75eae01f7fd2c99b4227b2.png

下拉列表

注意:如果要改变默认展示的选项,就将这个选项上面的option增加一个属性值,设置:selected='selected'

d1bf3b1f952dd2272d5a3cfb0480b0a0.png

文本域:

cols:设置合并的列数,控制文本域的宽度

rows:设置合并的行数,控制文本域的高度

04f086563ab46f5fb1a43c0cb62d0258.png

disabled:属性值:disabled,如果设置了该值,多行文本域将被禁用:

label标签:

可以将我们的文字提示信息和我们的表单控件的输入框"捆绑"成一个整体,当我们点击文字部分的内容的时候,会相应的选中我们在提示框中预先填好的默认信息,

label会触发我们跟文字紧邻的表单控件

label可以看做一个容器

写法一:

input表单的id属性的属性值">请输入用户名:

username" value="请输入用户名"/>

写法二:

请输入用户名:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值