HTML基础——表单的应用

1、表单的构成

一个完整的表单由表单控件(表单元素)、提示信息和表单域3个部分构成。

表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、搜索框等。
提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义、处理表单数据所用程序的url地址及数据提交到服务器的方法。

注：如果不定义表单域，表单中的数据就无法传送到后台服务器。

2、创建表单

<form></form>标记被用于定义表单域，即创建一个表单。

基本格式：

<html>

    <head>

        <title>创建表单</title>

        <meta charset="utf-8"/>

    </head>

    <body>

        <form action="http://www.mysite.cn/index.asp" method="post">

                                                     <!--表单域-->

        账号:                                         <!--提示信息-->

            <input type="text" name="zhanghao" />    <!--表单控件-->

        密码:                                         <!--提示信息-->

            <input type="password" name="mima" />    <!--表单控件-->

            <input type="submit" value="提交" />      <!--表单控件-->

        </form>

    </body>

</html>

注：<form></form>中的所有内容都会被提交给服务器。

3、表单属性

①.action属性：用于指定接收并处理表单数据的服务器程序的url地址。

例如：

<form action="form_action.asp">　　　　　　<!--提交订单时，表单数据会传送到名为"form_action.asp"的页面去处理-->

注：action的属性值可以是相对路径和绝对路径，还可以为接收数据的E-mail邮箱地址。

<form action=mailto:thmlcss@163.com>　　　　<!--提交表单时，表单数据会以电子邮件的形式传递出去-->

②.method属性：用于设置表单数据的提交方式。(取值为get或post)

例如:

<form action="form_action.asp" method="get">

get方法：浏览器将会按照下面两步来发送数据。首先：浏览器与action属性中指定的表单处理服务器建立联系，然后直接在一个传输步骤中发送所有的表单数据。
post方法：分两步来发送数据。首先：浏览器将于action属性中指定的表单处理服务器建立联系，然后，浏览器按分段传输的方法将数据发送给服务器。

注：get方法保密性差，不能大量传输数据。post方法保密性强，能大量传输数据。一般使用post方法。

③.name属性：name属性用于指定表单的名称。

用于指定表单的名称。

④.autocomplete属性

用于指定表单是否有自动完成功能。autocomplete属性有2个值，对他们的解释如下。

on：表单有自动完成功能。
off：表单无自动完成功能。

例如:

<html>

    <head>

        <title>autocomplete属性的使用</title>

        <meta charset="utf-8"/>

    </head>

    <body>

        <form id="formBox" autocomplete="on">

        用户名:

        <input type="text" id="autofirst" name="autofirst" /><br/><br/>

        昵&nbsp;&nbsp;称:

        <input type="text" id="autosecond" name="autosecond"/><br/><br/>

        <input type="submit" value="提交"/>

        </form>

    </body>

</html>

⑤.novalidate属性：指定在提交表单时取消对表单进行有效的检查。

例如：

<html>

    <head>

        <title>novalidate属性取消表单验证</title>

        <meta charset="utf-8"/>

    </head>

    <body>

        <form action="form_action.asp" method="get" novalidate="true">

        请输入电子邮件地址:<input type="email" name="user_email"/>

        <input type="submit" value="提交"/>

        </form>

    </body>

</html>

4、input元素及属性

用途：<input />元素是表单中最常见的元素，网页中常见的有单行文本框、单选按钮、复选框等都是通过它定义的。

input元素的相关属性：

（1）、input元素的type属性：用于定义不同的控件类型。

①.单行文本输入框<input type="text" />
单行文本输入框常用来输入简短的信息，如用户名、账号、证件号码等，常用的属性有name、value、maxlength。

②.密码输入框<input type="password" />

密码输入框用来输入密码，其内容将以圆点的形式显示。

③.单选按钮<input type="radio" />

注：

定义单选按钮时，必须为同一组中的选项指定相同的name值，这样"单选"才会生效。

可以对单选按钮应用checked属性，指定默认选中项。

④.复选框<input type="checkbox" />

可对其应用checked属性，指定默认选中项。

⑤.普通按钮<input type="button" />

通常配合javascript脚本语言使用。

⑥.提交按钮<input type="submit" />

是表单的核心控件，用来在页面中使用户单击提交表单数据。

可以对其应用value属性，改变提交按钮上的默认文本。

⑦.重置按钮<input type="reset" />

当用户输入的信息有误时，可单击重置按钮取消已输入的所有表单信息。

可以对其应用vale属性，改变重置按钮上的默认文本。

⑧.图像形式的提交按钮<input type="image">

定义图像形式的提交按钮，必须为其定义src属性指定图像的url地址。

⑨.隐藏域<input type="hidden" />

隐藏域对于用户是不可见的，通常用于后台的程序。

⑩.文件域<input type="file" />

当定义文件域时，页面中将出现一个文本框和一个“浏览...”按钮，用户可以通过填写文件路径或直接选择文件的方式，将文件提交给后台服务器。

代码示例：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>input控件</title>

    </head>

    <body>

        <form action="#" method="post">

            用户名：                                      <!--text单行文本输入框-->

            <input type="text" value="张三" maxlength="6" /><br/><br/>

            密码：                                        <!--passord密码输入框-->

            <input type="password" size="40" /><br/><br/>

            性别：                                        <!--radio单选按钮-->

            <input type="radio" name="sex" checked="checked" />男

            <input type="radio" name="sex" />女<br/><br/>

            兴趣：                                        <!--checkbox复选框-->

            <input type="checkbox" />唱歌

            <input type="checkbox" />跳舞

            <input type="checkbox" />游泳<br/><br/>

            上传头像：

            <input type="file" /><br/><br/>               <!--file文件域-->

            <input type="submit" />                       <!--submit提交按钮-->

            <input type="reset" />                        <!--reset按钮重置-->

            <input type="button" value="普通按钮" />       <!--button提交按钮-->

            <input type="image" src="data:images/login.gif" /> <!--image图像域-->

            <input type="hidden" />                       <!--hidden隐藏域-->

        </form>

    </body>

</html>

⑪email类型<input type="email" />

专门用来输入E-mail地址的文本输入框。会自动验证输入内容是否符合E-mail邮件地址格式。

⑫url类型<input type="url" />

专门用来输入URL地址的输入框。有自动检查功能。

⑬tel类型<input type="tel" />

用于提供输入电话号码的输入框。通常会和pattern属性配合使用。

⑭search类型<input type="search" />

专门用于输入搜索关键字的文本框。

⑮color类型<input type="color" />

专门用于提供设置颜色的文本框，用于实现一个RGB颜色输入。

代码示例:

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>input类型</title>

    </head>

    <body>

        <form action="#" method="get">

        请输入您的邮箱:

        <input type="email" name="formmail" /><br/>

        请输入个人网址:

        <input type="url" name="user_url" /><br/>

        请输入电话号码:

        <input type="tel" name="telphone" pattern="^\d{11}$" /><br/>

        输入搜索关键词:

        <input type="search" name="searchinfo" /><br/>

        请选取一种颜色:

        <input type="color" name="color1" />

        <input type="color" name="color2" value="#FF3E96" />

        <input type="submit" value="提交" />

        </form>

    </body>

</html>

⑯number类型<input type="number" />

用于提供输入数值的文本框。有自动检查功能。

可以对输入的数字进行限制，规定允许最大值和最小值，合法的数字间隔或默认值等。

◆value：指定输入框的默认值

◆max：指定输入框可以接受的最大的输入值

◆min：指定输入框可以接受的最小的输入值

◆step：输入与合法的间隔，如果不设置，默认值为1

代码示例:

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>number类型的使用</title>

    </head>

    <body>

        <form action="#" method="get">

        请输入数值:

        <input type="number" name="number1" value="1" min="1" max="20" step="4"/><br/>

        <input type="submit" value="提交"/>

        </form>

    </body>

</html>

⑰range类型<input type="range" />

用于提供一定范围内数值的输入范围，在页面中显示为滑动条。常用属性与number相同。通过step属性指定每次滑动的步幅。

⑱Date pickers类型<input type="data,nonth,week..." />

时间日期类型：用于验证输入的日期；

date                选取日、月、年

month                选取月、日

week                选取周和年

time                选取时间(小时和分钟)

datetime            选取时间、日、月、年(UTC时间)

detetime-local        选取时间、日、月、年(本地时间)

代码示例:

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>时间日期类型的使用</title>

    </head>

    <body>

        <form action="#" method="get">

            <input type="date" />&nbsp;

            <input type="month" />&nbsp;

            <input type="week" />&nbsp;

            <input type="time" />&nbsp;

            <input type="datetime" />&nbsp;

            <input type="datetime-local" />&nbsp;

            <input type="submit" value="提交" />

        </form>

    </body>

</html>

（2）、input元素的其他属性

①autofocus属性：
用于指定页面加载后是否自动获取鼠标焦点。

代码示例：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>autofocus属性的使用</title>

    </head>

    <body>

        <form action="#" method="get">

        请输入搜索关键词:

        <input type="text" name="user_name" autocomplete="off" autofocus="autofocus" /><br/>

        <input type="submit" value="提交" />

        </form>

    </body>

</html>

②form属性：

可以把表单内的子元素写在页面中的任意位置，只需为这个元素指定form属性并设值属性值为该表单的id即可。

此外，form属性还允许规定一个表单控件从属于多个表单。

代码示例：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>autocomplete属性的使用</title>

    </head>

    <body>

        <form id="formBox" autocomplete="on">

        用户名：

        <input type="text" id="autofirst" name="autofirst"/><br/><br/>

        昵&nbsp;&nbsp;&nbsp;&nbsp;称:

        <input type="text" id="autosecond" name="autosecond"/><br/><br/>

        <input type="submit" value="提交"/>

        </form>

    </body>

</html>

③list属性：

用于指定输入框所绑定的datalist元素，其值是个datalist元素的id。

datalist元素用于试下年数据列表的下拉效果。

代码示例：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>list属性的使用</title>

    </head>

    <body>

        <form action="#" method="get">

        请输入网址:

        <input type="url" list="url_list" name="weburl"/>

        <datalist id="url_list">

            <option label="新浪" value="http://www.sina.com.cn"></option>

            <option label="搜狐" value="http://www.sohu.com"></option>

            <option label="传智" value="http://www.itcast.cn"></option>

        </datalist>

        <input type="submit" value="提交" />

        </form>

    </body>

</html>

④multiple属性：

用于指定输入框可以选择多个值，该属性适用于email和file类型的input元素。

注：

multiple属性用于email类型的input元素时，表示可以向文本框中输入多个E-mail地址，用逗号隔开。

multiple属性用于file类型的input元素时，表示可以选择多个文件。

代码示例：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>multiple属性的使用</title>

    </head>

    <body>

        <form action="#" method="get">

        电子邮箱:

        <input type="email" name="myemail" multiple="multiple"/>&nbsp;&nbsp;(如果电子邮箱有多个,请使用逗号分隔)<br/><br/>

        上传照片:

        <input type="file" name="selfile" multiple="multiple" /><br/><br/>

        <input type="submit" value="提交"/>

        </form>

    </body>

</html>

⑤min、max、step属性：

用于为包含数字或日期的input输入类型规定限制。适用于date、pickers、number和range标签。

●max：规定输入框所允许的最大输入值。

●min：规定输入框所允许的最小输入值。

●step：为输入框规定合法的数字间隔，如果不设置，默认值是1。

⑥pattern属性：

用于验证input类型输入框中，用户输入的内容是否与所定义的正则表达式相匹配。

pattern属性适用于的类型是：text、search、url、tel、email和password的<input/>标记。

代码示例：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>pattern属性</title>

    </head>

    <body>

    <form action="#" method="get">

    账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：<input type="text" name="username" pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$" />(以字母开头,允许5~16字节,允许字母数学下划线)<br/>

    密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" name="pwd" pattern="^[a-zA-Z]\w{5,17}$" />(以字母开头，长度在6~18，只能包括字母、数字和下划线)<br/>

    身&nbsp;份&nbsp;证：<input type="text" name="mycard" pattern="^\d{15}|\d{15}|\d{18}$" />(15位、18位数字)<br/>

    E-mail地址:<input type="email" name="myemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\ w+)*\.\w+([-.]\w+)*$" />

    <input type="submit" value="提交" />

    </form>

    </body>

</html>

⑦placeholder属性

用于为input类型的输入框提供相关提示信息，以描述输入框期待用户输入何种内容。

在输入框为空时显式出现，而当输入框获得焦点时则会消失。
注：该属性适用于type属性值为text、search、url、tel、email及password的<input/>标记

代码示例：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>placeholder属性</title>

    </head>

    <body>

    <form action="#" method="get">

    请输入邮政编码:<input type="text" name="code" pattern="[0-9]{6}" placeholder="请输入6位数的邮政编码" />

    <input type="submit" value="提交" />

    </form>

    </body>

</html>

⑧required属性

用于规定输入框填写的内容不能为空，否则不允许用户提交表单。

代码示例：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>required属性</title>

    </head>

    <body>

    <form action="#" method="get">

    请输入姓名：<input type="text" name="user_name" required="required"/>

    <input type="submit" value="提交"/>

    </form>

    </body>

</html>

（3）、其他表单元素

①、textarea元素

通过textarea控件可以轻松的创建多行文本输入框。

格式：
<textarea cols="每行中的字符数" rows="显示的行数">

    文本内容

</textarea>

cols和rows为<textarea>标记的必须属性。

其中cols用来定义多行文本输入框每行中的字符数，rows用来定义多行文本输入框显示的行数。

他们的取值均为正整数。

textarea的可选属性

name            由用户自定义            控件的名称

readonly        readonly                该空间内容为只读(不能编译修改)

disabled        disabled                第一次加载页面时禁用该标签(显示为灰色)

代码示例：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>textarea控件</title>

    </head>

    <body>

    <form action="#" method="post">

    评论:<br/>

        <textarea cols="60" rows="8">

    评论的时候，请遵纪守法并注意语言文明，多给文档分享人一些支持。

        </textarea>

        <input type="submit" value="提交"/>

    </form>

    </body>

</html>

②、select元素

用来定义页面的下拉菜单。

基本格式：

<select>

    <option>选项1</option>

    <option>选项2</option>

    <option>选项3</option>

    ...

</select>

注：

<option></option>标记嵌套在<select></select>标记中，用于定义下拉菜单中的具体选项。

每对<select></select>中至少应包含一对<option></option>。

标记名	常用属性	描述
<select>	size	指定下拉菜单的可见选项数(取值为正整数)
<select>	multiple	定义multiple="multiple"时，下拉菜单将具有多项选择的功能，方法为按住Ctril键的同时选择多项
<option>	selected	定义selecet="selecet"时,当前项即为默认选中项

代码示例：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>select控件</title>

    </head>

    <body>

    <form action="#" method="post">

    所在校区：<br />

        <select>

            <option>-请选择-</option>

            <option>北京</option>

            <option>上海</option>

            <option>广州</option>

            <option>武汉</option>

            <option>成都</option>

        </select><br /><br />

    特长:(单选):<br />

        <select>

            <option>唱歌</option>

            <option selected="selected">画画</option>    <!--设置默认选中项-->

            <option>跳舞</option>

        </select><br /><br />

    爱好(多选):<br />

        <select multiple="multiple" size="4">            <!--设置多选和可见选项数-->

            <option>读书</option>

            <option selected="selected">写代码</option>    <!--设置默认选中项-->

            <option>旅行</option>

            <option selected="selected">听音乐</option>    <!--设置默认选中项-->

            <option>踢球</option>

        </select><br /><br />

        <input type="submit" value="提交"/>

    </form>

    </body>

</html>

HTML基础——表单的应用的更多相关文章

Bootstrap系列 -- 11. 基础表单
表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各 ...
bootstrap 基础表单内联表单横向表单
bootstrap 基础表单内联表单横向表单 <!DOCTYPE html> <html> <head> <title></title> ...
JavaScript | 基础表单验证（纯Js）
———————————————————————————————————————————— 基础表单验证(纯js) - - - - - - - - - - - - - - - - - - - - - - ...
bootstrap 基础表单
表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同. ☑ LESS版本:对应源文 ...
js基础-表单验证和提交
基础知识: 原始提交如下: <form action="/login" method="post" id="form1"> &l ...
JavaScript：基础表单验证
在用户填写表单的过程之中,往往需要编写一堆的验证操作,这样就可以保证提交的数据时正确的.那么下面就模拟表单验证的处理操作完成. 如果要想进行验证,首先针对于输入的数据来进行一个验证处理. 1.定义一个 ...
h5标签基础表单form
表单:收集用户信息一. 组成: 文本框<input type="text"/> 密码框<input type="password"/> ...
php编程之php基础表单
1 ,php表单当处理php表单的时候,php能把来自html页面的表单元素自动变成可供php脚本使用的数据. 比如: <html> <head> <meta char ...
JS基础-表单元素-新表单元素-js概述
1.表单元素 1.input元素 1.隐藏域和文件选项框 1.隐藏域 <input type="hidden"> 要提交给服务器的数据,但是不想展示给用户看可以放在隐藏 ...
vue基础——表单输入绑定
一.基础用法你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定.它会根据控件类型自动选择正确的方法来更新元素. 尽管有些神 ...

随机推荐

kafka2.3.1+zookeeper3.5.6+kafka-manager2.0.0.2集群部署（centos7.7）
一.准备三台服务器,配置好主机名和ip地址二.服务器初始化:包括安装常用命令工具,修改系统时区,校对系统时间,关闭selinux,关闭firewalld,修改主机名,修改系统文件描述符,优化内核参数 ...
林克的小本本之——记一些基础的linux命令
查看shell cat /etc/shells 查看系统支持的shell echo $SHELL 查看目前正在使用的shell 快捷键 Ctrl+a 跳到行首 Ctrl+e 跳到行尾 Ctrl+u 删 ...
Http中URI协议和URL协议的区别和联系
虽然说URL和URI是整个网络协议栈很常用的东西.可是,假如你去面试求职者其中的差别,估计十个人有八个人答复不上来. 想要熟悉基础知识的朋友最好还是看一下我这个文章. “A Uniform Resou ...
shiro实战（1）--web
目录结构: 数据库结构: 一·web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app ...
Python真牛逼，获取压缩文件密码，我只要一分钟！
事情的经过是这样的: 又是奶茶,行吧行吧. 快点开工,争取李大伟回来之前搞定. 李大伟说是6位数字密码那么我们可以利用python生成全部的六位数字密码这样,我们就生成了一个从000000到999 ...
ARTS改版啦，在改变中前行
这次打卡,稍微进行了一次改版,在算法和英文文档上进行了拆分,具体的内容在前两天的文章里已经输出,所以在这篇上针对这两块做了一个汇总. 当然,技巧方面的还是在这里先输出,后续再考虑整改吧.循序渐进地上升 ...
layui table表格表头与内容列错位问题（只有纵向滚动条的情况）
版本2.4.5 问题展示: 存在问题:正好错位一个纵向滚动条的宽度思路: 仔细观察th元素及th包裹的子元素div 如下图发现th宽度莫名的就多了5px 我就纳闷了解决方案:到table.js ...
java类成员的默认可访问性是什么？你猜
先看下面TestModel: import org.apache.commons.collections4.BidiMap; import org.apache.commons.collections ...
Unable to connect to the server: x509: certificate signed by unknown authority
0x00 Problem 在使用二进制搭建 k8s 集群的过程中,使用 kubectl get 等操作时始终显示 x509: certificate signed by unknown authori ...
Java8特性Lambda表达式
Lambda 表达式简介: Lambda 表达式,也可称为闭包,它是推动 Java 8 发布的最重要新特性. Lambda 允许把函数作为一个方法的参数(函数作为参数传递进方法中). (parame ...

HTML基础——表单的应用

HTML基础——表单的应用的更多相关文章

随机推荐

热门专题