网页设计HTML和css (3)

表单:

定义:

是一个容器,用来存储客户端(浏览器)用户填写的信息的容器,通过提交按钮将表单容器里面的信息提交到服务器存储起来,以后可以调用。

<form id="register1" name="register" action="/login" method="get/post">
</form>
<form id="register2" name="register" action="" method="get/post">
</form>

id:指的是表单的id(唯一),js通过表单id操作表单
如身份证号
501107 19990909 0832(X)

  • name:指的是表单的名字(不唯一),同上
  • action:指的是处理表单或者接收表单信息的url
  • method:指的是表单提交的方法,默认get(不安全)post(安全)

<input>标签(表单里面的控件)
<input type=””>标签用来定义的控件

  • 表单中可以包含很多控件,其中,用<input>标签定义的控件有单行文本框、密码框、提交按钮、重置按钮、普通按钮、单选按钮、复选框以及上传文件按钮等。这些控件是表单的核心控件,在表单设计中被频繁地使用。
(1)单行文本框

单行文本框指的是表单中可以输入一行文本的输入框,通过设置<input>标签的type属性为text来指定。其格式如下:

<input type=“text” name=“…” value=“…” size=“…” maxlength=“…” οnchange=“…” οnselect=“…” οnfοcus=“…”/>

其中:

  • name指的是单行文本框的名称
  • value指的是单行文本框的默认的初始值
  • size指的是单行文本框的显示宽度
  • maxlength指的是单行文本框允许用户输入的最大的字符数
  • onchange指的是当文本框内文本发行改变时调用的脚本语句或函数
  • onselect指的是当文本框内的文本被选中时调用的脚本语句或函数
  • onfocus指的是当文本框获得焦点时调用的脚本语句或函数
(2)密码框

密码框通过指定<input>标签的type属性值为password来实现。在密码框中输入字符时,显示的都是*或者实心圆点,密码框的用法和单行文本框的用法基本相同,其格式如下:

<input type=“password” name=“…” value=“…” size=“…” maxlength=“…” οnchange=“…” οnselect=“…” οnfοcus=“…”/>
(3)提交按钮
  • 提交按钮通过指定<input>标签的type属性值为submit来实现。单击了提交按钮后,提交按钮所在的表单的内容会被提交到表单标签中
  • action属性所指的处理程序
    提交按钮的使用格式如下:
<input type=“submit” value=“…”/>

其中,value指的是提交按钮上**显示的提示文字,**一般为“Submit”或者“提交”。

(4)重置按钮

重置按钮通过指定<input>标签的type属性值为reset来实现。当单击重置按钮时,重置按钮所在的表单中的所有控件的内容将会被清除,回到控件的默认的初始值,可以重新在控件中输入数据。
重置按钮的使用格式如下:

<input type=“reset” value=“…”/>

其中,value指的是重置按钮上显示的提示文字,一般为“Reset”或者“重置”。

(5)普通按钮

除了以上提交按钮和重置按钮之外,还可以使用普通按钮。通过设置<input>标签的type属性值为button来实现。在表单中使用普通按钮,必须使用**onclick调用处理脚本或脚本函数,**使用格式如下:

<input type=“button” name=“…” value=“…” οnclick=“…” οnfοcus=“…”/>

其中:

  • name指的是普通按钮的名字
  • value指的是普通按钮上的提示文字
  • onclick指的是当单击普通按钮时执行的脚本语句或函数;
  • onfocus指的是当普通按钮获得焦点时执行的脚本语句或函数;
(6)单选按钮

单选按钮通过指定<input>标签的type属性值为radio实现,其格式如下:

<input type=“radio” name=“…” value=“…” οnclick=“…” οnfοcus=“…” checked />

其中:

  • name指的是单选按钮的名称,多个单选按钮属于同一个选项组,必须具有相同的name值;
  • value指的是单选按钮的值
  • checked属性项可选,如果单选按钮的默认状态为被选中,则将checked写在其属性列内;如果不将checked写在其属性列内,则单选按钮的默认状态为未选中;
  • onclick指的是当单击单选按钮时执行的脚本语句或脚本函数;
  • onfocus指的是当单选按钮获得焦点时执行的脚本语句或脚本函数;
(7)复选按钮

复选按钮通过指定<input>标签的type属性值为checkbox来实现。其使用格式如下:

<input type=“checkbox” name=“…” value=“…” οnclick=“…” οnfοcus=“…” checked/>

复选按钮默认的选中状态也通过checked指定,多个复选按钮是否处于同一个选项组也通过name属性指定。其属性可参照单选按钮的属性说明。

(8)隐藏域
  • 表单中的隐藏域在浏览器中是不可见的,因此用户不能借助隐藏域进行交互操作。一般通过隐藏域来传递一些为开发者服务的信息,例如动态方法的调用、Session会话跟踪等。隐藏域通过指定<input>标签的type属性值为hidden来实现,其格式如下:
<input type=“hidden” value=“…” name=“…”/>
(9)上传文件域
  • 上传文件域通过指定<input>标签的type属性值为file来实现。它包括一个文本框和一个按钮。其格式如下:
<input type=“file” name=“…” value=“…”/>

其中:

  • name指的是上传文件域的名称
  • value指的是上传文件域中的按钮的提示文字,一般为“选择文件”或“浏览……”。
(10)日期选择框
<!-- 日期选择框-->
生日:<input type="date" id="birthday" name="birthday">
(11)文本域
<textarea rows="5" cols="20">文本域
(12)下拉菜单

下拉列表使用一对<select>标签来实现,其格式如下:

<select name=“…” >
  <option value=“…” selected=“selected”>选项1提示信息</option>
  <option value=”…”>选项2提示信息</option>
</select> 

总结:
1.表单当中 <form> <input> 有 id 、name 这两个共同属性
2. <input> 当中通过改变 type的值来改变控件类型,type里面有 10中类型
text、 password 、 submit 、 reset、 button、 radio 、 checkbox、hidden、file、date

1.API,全称Application Programming Interface,即应用程序编程接口。
2.API是一些预先定义函数,目的是用来提供应用程序与开发人员基于某软件或者某硬件得以访问一组例程的能力,并且无需访问源码或无需理解内部工作机制细节

API就是操作系统给应用程序的调用接口,应用程序通过调用操作系统的 API而使操作系统去执行应用程序的命令(动作)。在 Windows 中,系统API是以函数调用的方式提供的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值