day02_01(html表单使用)

1:表单标记(form)

在网页中<form></form>标记对用来创建一个表格;

在<form></form>可以设置表单的基本属性,包括表单的名称,处理程序和传送方法;

一般情况下,表单的处理程序action和传递的方法method,这两个参数是比不可少的;

提交表单:action

用于指定表单数据提交到那个地址进行处理;

目标显示方式:target

target:用来指定目标窗口的打开方式,表单的目标窗口往往用来显示表单的返回值;

打开方式:

_blank:载入一个未命名的新浏览器中

_parent:载入含有该链接框架的父框架集或符窗口中;

_self:载入该链接所在的同一框架或窗口中;

_top:载入所链接文件,因而会删除所有的框架;

2:插入表单对象

文字字段:text

参数:

type:指定插入那种表单元素

name:文字字段的名称,用于和页面中其他控件加以区分;

value:文本框中的默认值;

size:文本框在页面中显示的长度;

maxlength:设置文本框中最多可以输入的字符数;

密码域:password

参数:

type:指定插入那种表单元素

name:密码域的名称,用于和页面中其他控件加以区分;

value:密码的默认值,以*显示;

size:文本框在页面中显示的长度;

maxlength:设置密码域文本框中最多可以输入的字符数;

单选按钮:radio

参数:

type:指定插入那种表单元素

value:必须要设置;

name:对于一个选择列表中的所有单选项按钮来说,需要设置相同的名称;

checked:在一个单选按钮中只有一个单选按钮可以设置checked;

普通按钮:button

参数:

type:指定插入那种表单元素;

name:普通按钮名称,用于和页面中其他控件加以区分;

value:按钮的取值;

调交按钮:submit

参数:

type:指定插入那种表单元素;

name:按钮名称,用于和页面中其他控件加以区分;

value:按钮的取值

重置按钮:reset

参数:

type:指定插入那种表单元素;

name:按钮名称,用于和页面中其他控件加以区分;

value:按钮的取值

图片域:image

参数:

type:指定插入那种表单元素;

name:名称,用于和页面中其他控件加以区分;

src:指定图片的位置

文件域:file

参数:

type:指定插入那种表单元素;

name:文件域的名称

size:控件的长度

maxlenght:最长的字符数

2:菜单和列表

下拉菜单:

语法:

<select name="下拉菜单">

<option value="选项值">显示内容</option>

</select>

selected:表示该选项在默认情况下是被选中的

一个下拉菜单中只能有一个默认选项被选中;

列表项:

语法:

<select name="下拉菜单" size="显示的列表项数" multiple="multiple">

<option value="选项值">显示内容</option>

</select>

size:用于设置在页面中显示的最多列表项数;

文本域标记:textarea

文本域使用的textarea标记;

参数:

name:文本域的名称

cols:列数

rows:行数

实例:

<body>
<form action="#" method="get">
    用户名:<input type="text" name="user" size="20" maxlength="15"/><br/>
    年龄:<input type="text" name="age" size="20" maxlength="2" /><br/>
    密码:<input type="password" name="password" size="15" maxlength="8"/><br/>
    性别:<input type="radio" name="sex" value="男" checked="checked"/>男
    <input type="radio" name="sex" value="女" />女<br/>
    <input type="button" name="button" value="关闭窗口" onclick="window.close()"/><br/>
    <input type="submit" name="submit" value="注册"/>  
    <input type="reset" name="reset" value="重置"/><br/>
    <input type="image" src="100.png" name="image"/><br/>
    上传图片:<input type="file" name="file" size="30" maxlength="35"/><br/>
    地区:
    <select name="下拉菜单">
        <option value="北京" selected>北京</option>
        <option value="上海" >上海</option>
        <option value="广州" >广州</option>
        <option value="深圳" >深圳</option>
    </select><br/><br/><br/>
    地区:
    <select name="下拉菜单" size="1" multiple="multiple">
        <option value="北京" selected>北京</option>
        <option value="上海" >上海</option>
        <option value="广州" >广州</option>
        <option value="深圳" >深圳</option>
    </select><br/><br/>
    留言板:
    <textarea name="textarea" cols="20" rows="10"></textarea>
</form>
</body>

  

时间: 2024-10-13 15:45:41

day02_01(html表单使用)的相关文章

Django表单上传

任务描述:实现表单提交(上传文件) 1.项目目录: 2.源代码: regist.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>regist</title> </head> <body> <h3>regist</h3> <hr> <

表单的作用

①input的作用分为:单选按钮.文本框.密码框.复选按钮.隐藏表单域.文本选择框.图片按钮.普通按钮.提交按钮.重置按钮 ②select的作用:可创建单选或多选菜单,含有<option>标签 在HTML5中的新属性:1.autofocus属性            值autofocus                     规定在页面加载后文本区域自动获得焦点: 2.disabled                        disabled                      

JS设置读取删除cookie及表单交互

学习cookie和表单交互留下的一点笔记 什么是cookie?cookie 是存储于客户端的变量.当设备请求页面时,就会发送cookie.首先需要稍微了解一下cookie的结构,简单地说:cookie是以键值对的形式保存的,即key=value的格式.各个cookie之间一般是以";"分隔.JS设置cookie:document.cookie= key + '=' + value + ';expires=' + Date;其中Date为cookie的过期时间.实际案例: //setCo

HTML中的表格、表单元素与框架的构建

表格 <table></table>表格 width: 宽度可用像素或百分比: height:高度可用像素或百分比: border:边框宽度: cellpadding:内容跟单元格边框的边距 常用0: cellspacing:单元格之间的间距  常用0: align: 对齐方式: bgcolor:背景色: <tr></tr> 行 align:一行内容的水平对齐方式: valign: 垂直对齐方式: <td></td> 单元格 <

form表单那点事儿(上) 基础篇

做为html中最为常见,应用最广泛的标签之一,form常伴随前端左右.了解更深,用的更顺. 目录: 表单属性 表单元素 常识 模拟外观 表单属性 这个表单展示了form表单常用的属性 属性名 属性值 描述 action 一个url地址 指定表单提交到的地址 method `GET` , `POST` 表单将以此种方法提交到服务器 target `_self` 当前页面 `_blank` 每次在新窗口打开 `blank` 每次在同一个新窗口打开 `_parent` 父级frame `_top` 顶

html(五) -- 表单标签

表单标签: 表单标签的作用是用于提交数据给服务器的. 表单标签的根标签是<form>标签 常用的属性:    action: 该属性是用于指定提交数据的地址.    method: 指定表单的提交方式.            get : 默认使用的提交方式.  提交的数据会显示在地址栏上.            post :  提交的数据不会显示在地址栏上.注意: 表单项的数据如果需要提交到服务器上面,那么表单项必须要有name的属性值. 代码示例: 1 <!DOCTYPE html&g

python :表单验证--对每一个输入框进行验证

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"/> <title>Title</title> <style> .error{ color

VALIDFORM前端小插件实现表单验证;

好开心啊,有了这个小插件就不用在服务器端去写用户输入的东西是否合法,又美观: 这个是官网,使用入门那儿很简单,不如直接改demo; 下载的demo就是这个: 小李子(永奇商城注册页面表单验证): 就是这个,那个邮箱正则验证效果如何加上去的呢: 看demo就知道(把demo里面之中整个demo文件夹拷贝在项目之中,将css之中validform必须的留下,其他删除掉,也就是demo文件夹里面/*==========以下部分是Validform必须的===========*/这一行字下面的css样式

HTML:图片热点 网页划区 表单

图片热点: 划出图片中的区域,做超链接,点击该区域就可以直接跳转到链接网站 <img src="../../../3.jpg" title="血精灵" usemap="jingling" /> <map name="jingling"> <area shape="rect" coords="52,217,288,395" href="http://