1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 前端:HTML/06/表单 表单元素(单行文本域 单行密码域 单选按钮 复选框 下拉列表

前端:HTML/06/表单 表单元素(单行文本域 单行密码域 单选按钮 复选框 下拉列表

时间:2022-12-15 00:36:08

相关推荐

前端:HTML/06/表单 表单元素(单行文本域 单行密码域 单选按钮 复选框 下拉列表

表单<form>(块元素)

表单的概念:表单主要用来获取用户数据(信息),如:注册表单,

查询表单,登录表单。

表单的工作原理:

浏览有表单的网页,填写一些必要的信息,然后点击某个按钮进行提交;

这些表单数据,通过互联网,传递到了服务器上;

服务器上有专门的程序,对表单数据进行验证,如果验证成功,则数据存入数据库,返回一个验证成功的信息。如果验证失败,将返回一个错误信息;

表单的制作分两个部分,一是前台页面的制作,二是后台php对表单的处理。

表单的结构

<form name=“forml”>

用户名:<input type=“text” name=“username”/>

密码:<input type=“password” name=“userpwd”/>

<input type=“submit” value=“提交表单”/>

</form>

<form>标记属性

name:给表单起个名字,这个名字主要给JavaScript来用,JS主要用来做客户端表单验证

method :表单的提交方式,取值:get(默认;通过地址栏传递,可在地址栏看到提交的信息)或post ;

action :指定表单的处理程序,一般是php文件;当action取值为空则默认提交给当前网页文件

enctype :指定表单数据的编码方式(解密方式);这个属性只能用在 method="post"的情况下,有两个取值:

application/x-www-form-urldecoded //默认的加密方式

multipart/form-data //如果你要上传文件时取值为此值,

get方法和post方法

1,get方法提交方式(默认方式,地址栏也是默认为get方式;但表单中通常使用post方法)

get方式,是将表单数据追加到action指定的处理程序的后面,然后向服务器发出请求;

特点:1,get方式不能提交敏感数据,如:密码;

2,get方式只能提交少量数据,因为长度有限制,大约100个字符;

3,get方式下不能上传附件(文件)

post表单提交方式

post提交方式不是将表单数据追加到地址上,而是直接传给表单处理程序;

特点:1,post提交的数据相对安全;

2,post可以提交海量数据;

3,post方式可以上传附件。

单行文本域

语法格式:<input type=“text” 属性=“值”/>

常用属性:

name :文本框的名字,命名规则是:可以包含字母,数字,下划线,只能以字母开头;

type :表单元素的类型;

value :文本框中的值;

size :文本框的长度,以“字符”为单位。

maxlength :最多可以输入多少个字符,超出的就输不进去了;

readonly :只读属性,可以选中,但不能修改;如:readonly=“readonly”

disabled ;禁用属性,不能选中,不可修改;如:disabled=“disabled”

单行密码域

与文本域非常相似

语法格式:<input type=“password” 属性=“值” />

常用属性:

name :文本框的名字,命名规则是:可以包含字母,数字,下划线,只能以字母开头;

type :表单元素的类型;

value :文本框中的值;

size :文本框的长度,以“字符”为单位。

maxlength :最多可以输入多少个字符,超出的就输不进去了;

readonly :只读属性,可以选中,但不能修改;如:readonly=“readonly”

disabled ;禁用属性,不能选中,不可修改;如:disabled=“disabled”

单选按钮

语法格式:<input type=“radio” 属性=“值” />

常用属性:

name :元素的名称

value :元素的值,该value中数据将发往服务器;

checked :默认选择哪一项;如:checked=“checked”

注意:一组单选按钮,只能选择一个,但name的值必须一致;如:name=“sex”

单选按钮用户自己不能输入内容,用户只能选择,因此必须为它指定默认值value

复选框

语法格式:<input type=“checkbox” 属性=“值” />

常用属性:

name :元素的名称

value :元素的值,该value中数据将发往服务器;

checked :默认选择哪一项;如:checked=“checked”

注意:复选框也是一组选项,因此name的值必须一致,在php中,使用数组来获取多个同名的name的值;复选框中可以同时选多个,也可以一个都不选。

下拉列表

语法格式:

<select name=“city”>

<option value=“小明”>小明</option>

<option value=“小红”>小红</option>

<option value=“小白”>小白</option>

<option value=“小紫”>小紫</option>

<option value=“小黑”>小黑</option>

</select>

<select>标记的属性,只有一个name属性;

<option>标记的属性有两个:value属性,selected属性;

selected:设置默认选中,如:selected=“selected”

文本区域

<textare name=“名称” cols=“宽度” rows=“高度”>默认文本(一般为空,让用户输入的)</textare>

常用属性:

name:元素名称

cols:宽度,是指多少个字符宽

rows:高度,是指几行高

提示:<textarea>和</textarea>之间是默认文本

各种按钮

提交按钮:<input type=“submit” value=“提交表单” />

图片按钮:<input type=“image” src=“images/p1.jpg” /> //功能和提交按钮一样

重置按钮:<input type=“reset” value=“重新填写” />

普通按钮:<input type=“button” οnclick=“javascrpt.window.close()” value=“关闭窗口” /> //普通按钮本身是不具有任何功能的,一般要与JS程序配合使用,实现相应的功能。

隐藏域

功能:隐藏域就是看不见的框,传递一些值,而这个值又不想让别人看见;

用处:主要用于php后面程序,如:修改某一条新闻内容时,需要传递一个新闻的id号。

语法格式:<input type=“hidden” 属性=“值” />

上传文件域

语法格式:<input type=“file” 属性=“值” />

常用属性:

name:表单元素的名称

value :表单元素的值,这个值其实就是上传的文件名,但此时value属性被改为只读属性(为了安全性),value的内容只能通过手动选择要上传的文件后才改变

注意:此时只能实现上传文件框,而没有真正的上传,上传功能要用php来实现。

上传文件时则表单属性中的enctype="multipart/form-data"才行

<caption>表格标题

语法格式:<caption></caption>

<caption>是表格(<table>)的子标记,作为表格的标题,自动位于表格正上方,且加粗

@沉木

前端:HTML/06/表单 表单元素(单行文本域 单行密码域 单选按钮 复选框 下拉列表 文本区域 上传文件域 各种按钮 隐藏域 lt;caption表格标题)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。