精华内容
参与话题
问答
  • HTML-表单(非常详细)

    万次阅读 多人点赞 2018-08-31 10:41:24
    表单语法 ...result.html">(表示向何处发送表单数据) <p> 名字:<input name="name" type="text" > </p> <p&

     

    表单语法

    <form  method="post"(规定如何发送表单数据      常用值:get|post)
     action="result.html">(表示向何处发送表单数据)
       <p>  名字:<input name="name" type="text" >  </p>
       <p>  密码:<input name="pass" type="password" >  </p>
       <p>
          <input type="submit" name="Button" value="提交"/>
          <input type="reset" name="Reset" value="重填“/> 
       </p>
    </form>
    

    经验:在实际网页开发中通常采用post方式提交表单数据

     

    表单元素格式

    语法:

    <input  type="text"(input元素类型)name="fname"(input元素名称) 
    value="text"(input元素的值)/>
    

    属性

    说明

    type

    指定元素的类型textpasswordcheckboxradiosubmitresetfilehiddenimage button默认为 text

    name

    指定表单元素的名称

    value

    元素的初始值type radio必须指定一个值

    size

    指定表单元素的初始宽度 type text password,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位

    maxlength

    typetext password 时,输入的最大字符

    checked

    typeradiocheckbox时,指定按钮是否是被选中

     

    表单元素

    文本框-语法

    <input  type="text"(文本框)  name="userName"(文本框名称) value="用户名"(文本框初始值) size="30"(文本框长度) maxlength="20"(文本框可输入最多字符) />
    

    密码框-语法

    <input  type="password "(密码框)  name="pass"(密码框的名称)  size="20"(密码框的长度) />
    

    单选按钮-语法

    <input name="gen" type="radio"(单选按钮框) value="男"(值)  checked(单选按钮选中状态)  />男
    <input name="gen" type="radio" value="女" />女
    

    复选框-语法

    <input type="checkbox"(复选框) name="interest" value="sports"(值)/>运动
    <input type="checkbox" name="interest" value="talk" checked(复选框选中状态) />聊天
    <input type="checkbox" name="interest" value="play"/>玩游戏
    

    列表框-语法

    <select(列表框) name="列表名称" size="行数">
    <option value="选项的值" selected="selected"(默认选中项)>…</option >
    <option(选项) value="选项的值">…</option >
    </select>
    

    按钮-语法

    <input type="reset" (重置按钮) name="butReset"  value="reset按钮"(按钮上显示的文字)>
    <input type="submit"(提交按钮) name="butSubmit" value="submit按钮">
    <input type="button"(普通按钮) name="butButton" value="button按钮"/>
    
    
    图片按钮
    
    <input type="image" src="images/login.gif"/(图片路径)>

    多行文本域-语法

    <textarea(多行文本域)  name="showText"  cols="x"(显示的列数)  rows="y"(显示的行数)>文本内容 </textarea  >
    

    文件域-语法

    <form action="" method="post" enctype="multipart/form-data"(表单编码属性)>
      <p><input type="file"(文件域) name="files" />
      <input type="submit" name="upload" value="上传" /></p>
    </form>
    

    邮箱-语法

    <p>邮箱:<input type="email"(邮箱)  name="email"/></p>
    <input type="submit"/>
    

    注意:会自动验证Email地址格式是否正确

    网址-语法

    <p>请输入你的网址:<input type="url"(网址)  name="userUrl"/></p>
    <input type="submit"/>
    

    注意:会自动验证URL地址格式是否正确

    数字-语法

    <p>请输入数字:<input type="number"(数字)  name="num" min="0"(允许的最小值) max="100"(允许的最大值) step(合法的数字间隔)="10"/></p>
    <input type="submit"/>
    

    滑块-语法

    <p>请输入数字:<input type="range"(滑块)  name="range1" min="0"(允许的最小值) max="10"(允许的最大值) step(合法的数字间隔)="2"/></p>
    <input type="submit"/>
    

    搜索框-语法

    <p>请输入搜索的关键词:<input type="search"(搜索框)  name="sousuo"/></p>
    <input type="submit"/>
    

     

    表单的高级应用

    隐藏域-语法

    <input type="hidden"(隐藏域) value="666" name="userid">
    

    只读和禁用-语法

    <input name="name" type="text" value="张三"  readonly(只读文本框)>
    <input type="submit "  disabled (禁用)  value="保存" >
    

    表单元素的标注

    1.增强鼠标的可用性

    2.自动将焦点转移到与该标注相关的表单元素上

    语法

    <label for="id"(表单元素的id)>标注的文本</label>
    <input type="radio" name="gender" id="male"/(表单元素id)>
    

     

    表单的初级验证

    表单验证的好处

            1.减轻服务器的压力

            2.保证数据的可行性和安全性

    表单初级验证的方法

           1.placeholder                   2.required                       3.pattern

    placeholder

               1.input类型的文本框提供一种提示(hint

               2.可以描述文本框期待用户输入何种内容

               3.提示语默认显示当文本框中输入内容时提示语消失

               4.适合于input标签:textsearchurlemailpassword等类型

    语法:

    <input type="search" name="sousuo"  placeholder(文本框输入内容提示)="请输入要搜索的关键字"/>
    

     

    required

               1.规定文本框填写内容不能为空,否则不允许用户提交表单

               2.适合于input标签textsearchurlemailpasswordnumbercheckboxradiofile等类型

    语法:

    <input type="text" name="username"  required/(必填项)>
    

    pattern

             用户输入的内容必须符合正则表达式所指的规则,否则就不能提交表

    语法:

    <input type="text" name="tel"  required pattern(验证规则,正则表达式)="^1[358]\d{9}" />
    

         

     

    展开全文
  • HTML中Form表单的使用

    万次阅读 多人点赞 2019-06-20 15:16:26
    1、form表单标记 表单标记以<form>标记开头,以</form>标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。 <form>标记的基本语法如下: <form action="url" method="get | ...

    1、form表单标记

    表单标记以<form>标记开头,以</form>标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。

    <form>标记的基本语法如下:

    <form action="url" method="get | post" name="formName" onsubmit="" target="">
    </form>

    <form>标记的属性说明:

    示例:创建表单,设置表单名称为 myForm,传送方式为 post,当用户提交表单时,提交至 action.html 页面进行处理。

    <form id="form1" name="myForm" method="post" action="action.html" target="_blank">
    </form>

     

    2、form表单的提交与重置

    form表单的提交与重置可以通过HTML自带的表单按钮方式,或者使用JavaScript脚本的方式。

    2.1 使用表单按钮

    <form id="form1" name="myForm" method="post" action="action.html" target="_blank">
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>

    2.2 使用JavaScript脚本

    2.2.1 使用JavaScript脚本提交form表单

    //提交表单
    myForm.method = 'POST';
    myForm.action = "action.html";
    myForm.submit();

    2.2.2 使用JavaScript脚本重置form表单

    //重置表单
    document.getElementsByName("myForm")[0].reset();

    示例:使用JavaScript脚本实现form表单的提交与重置。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用JavaScript脚本实现form表单的提交与重置</title>
        <meta name="author" content="pan_junbiao的博客">
    </head>
    <body>
        <form name="myForm">
            <table align="center">
                <caption>用户注册</caption>
                <tr>
                    <td>博客信息:</td>
                    <td>
                        <label>您好,欢迎访问 pan_junbiao的博客</label>
                    </td>
                </tr>
                <tr>
                    <td>博客地址:</td>
                    <td>
                        <label>https://blog.csdn.net/pan_junbiao</label>
                    </td>
                </tr>
                <tr>
                    <td>登录账户:</td>
                    <td>
                       <input type="text" name="loginName" />
                    </td>
                </tr>
                <tr>
                    <td>登录密码:</td>
                    <td>
                        <input type="password" name="loginPwd" />
                    </td>
                </tr>
                <!-- 以下是提交、取消按钮 -->
                <tr>
                    <td colspan="2" style="text-align: center; padding: 5px;">
                        <input type="button" value="提交" onclick="submitFrom()"/>
                        <input type="button" value="重置" onclick="resetFrom()"/>
                    </td>
                </tr>
            </table>
        </form>
    </body>
    <script>
        //提交
        function submitFrom()
        {
            //验证数据
            if(!myForm.loginName.value)
            {
                alert("请输入登录账户!");
                myForm.loginName.focus();
                return;
            }
    
            if(!myForm.loginPwd.value)
            {
                alert("请输入登录密码!");
                myForm.loginPwd.focus();
                return;
            }
    
            //提交表单
            myForm.method = 'POST';
            myForm.action = "action.html";
            myForm.submit();
        }
    
        //重置
        function resetFrom()
        {
            //重置表单
            document.getElementsByName("myForm")[0].reset();
        }
    </script>
    </html>

    注意:使用JavaScript脚本实现form表单的提交与重置时,按钮是普通按钮:type="button"。

    执行结果:

     

    3、form表单提交前数据校验

    当我们在提交form表单前,需要对表单的数据进行有效性校验。下面将介绍如何使用JavaScript实现对form表单提交前的数据校验。

    示例:创建login.html登录页面,并使用JavaScript实现提交表单前的数据校验。

    3.1 校验方式一

    使用form表单的 onsubmit 提交事件。

    注意:

    (1)登录按钮的类型必须是:type="submit" 。

    <input type="submit" value="登录"/>

    (2)提交方法是写在form元素的 onsubmit 提交事件上,并且方法名前面必须加上 return 。

    <form action="action.html" method="post" name="myForm" onsubmit="return SubmitLogin()">
    </form>

    完整代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录</title>
        <meta name="author" content="pan_junbiao的博客">
    </head>
    <body>
    <div align="center">
        <form action="action.html" method="post" name="myForm" onsubmit="return SubmitLogin()">
            <table>
                <caption>请输入登录信息</caption>
                <tr>
                    <td>博客信息:</td>
                    <td>
                        <label>您好,欢迎访问 pan_junbiao的博客</label>
                    </td>
                </tr>
                <tr>
                    <td>博客地址:</td>
                    <td>
                        <label>https://blog.csdn.net/pan_junbiao</label>
                    </td>
                </tr>
                <tr>
                    <td>登录账户:</td>
                    <td>
                        <input type="text" name="loginName" />
                    </td>
                </tr>
                <tr>
                    <td>登录密码:</td>
                    <td>
                        <input type="password" name="loginPwd" />
                    </td>
                </tr>
                <!-- 以下是提交、取消按钮 -->
                <tr>
                    <td>
                        <input type="submit" value="登录"/>
                    </td>
                    <td>
                        <input type="reset" value="取消"/>
                    </td>
                </tr>
            </table>
            <span id="tips" style="color: red; font-weight: bold"></span>
        </form>
    </div>
    </body>
    <script>
        //提交登录
        function SubmitLogin() {
            let tips = document.getElementById("tips");
    
            //判断用户名是否为空
            if (!myForm.loginName.value) {
                tips.innerText = "请输入登录账户!"
                myForm.loginName.focus();
                return false;
            }
            //判断密码是否为空
            if (!myForm.loginPwd.value) {
                tips.innerText = "请输入登录密码!"
                myForm.loginPwd.focus();
                return false;
            }
            //校验成功
            return true;
        }
    </script>
    </html>

    3.2 校验方式二

    使用普通按钮的 onclick 点击事件。

    注意:

    (1)登录按钮的类型必须是:type="button"。

    (2)提交方法是写在按钮的 onclick 点击事件上。

     <input onclick="SubmitLogin()" type="button" value="登录"/>

    完整代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录</title>
        <meta name="author" content="pan_junbiao的博客">
    </head>
    <body>
    <div align="center">
        <form action="action.html" method="post" name="myForm">
            <table>
                <caption>请输入登录信息</caption>
                <tr>
                    <td>博客信息:</td>
                    <td>
                        <label>您好,欢迎访问 pan_junbiao的博客</label>
                    </td>
                </tr>
                <tr>
                    <td>博客地址:</td>
                    <td>
                        <label>https://blog.csdn.net/pan_junbiao</label>
                    </td>
                </tr>
                <tr>
                    <td>登录账户:</td>
                    <td>
                        <input type="text" name="loginName" />
                    </td>
                </tr>
                <tr>
                    <td>登录密码:</td>
                    <td>
                        <input type="password" name="loginPwd" />
                    </td>
                </tr>
                <!-- 以下是提交、取消按钮 -->
                <tr>
                    <td>
                        <input onclick="SubmitLogin()" type="button" value="登录"/>
                    </td>
                    <td>
                        <input type="reset" value="取消"/>
                    </td>
                </tr>
            </table>
            <span id="tips" style="color: red; font-weight: bold"></span>
        </form>
    </div>
    </body>
    <script>
        //提交登录
        function SubmitLogin() {
            let tips = document.getElementById("tips");
    
            //判断用户名是否为空
            if (!myForm.loginName.value) {
                tips.innerText = "请输入登录账户!"
                myForm.loginName.focus();
                return;
            }
            //判断密码是否为空
            if (!myForm.loginPwd.value) {
                tips.innerText = "请输入登录密码!"
                myForm.loginPwd.focus();
                return;
            }
            
            //提交表单
            myForm.submit();
        }
    </script>
    </html>

    执行结果

     

    展开全文
  • HTML表单示例

    千次阅读 2019-01-11 23:57:56
    表单HTML页面中负责数据采集功能的部件。它往往由三部分组成,即表单标签、表单域、表单按钮。 表单标签:用于表面表单的范围,位于表单标签中的元素将被提交 语法:&lt;form&gt;&lt;form&gt; ...

    表单是HTML页面中负责数据采集功能的部件。它往往由三部分组成,即表单标签、表单域、表单按钮。

    表单标签:用于表面表单的范围,位于表单标签中的元素将被提交

    语法:<form><form>

    属性:Method,Enctype,action

    表单域:包括文本框,密码框等多种类型

    语法:<input……/>

    属性:type,name,value

    种类:文本框<type = text>

               密码框<type = password>

               文本区域<type = textarea>

               文件上传框<type = file>

               单选框<type = radio>

               复选框<type = checkbox>

    表单按钮:复位、提交、按钮

    <html>
    <head>
    	<script type="text/javascript" src="checkvalue.js"></script>
    </head>
    <body>
    	<form name="form1">
    		<input type="text" placeholder="Text" name="text1" />
    		<input type="password" placeholder="password" name="password" />
    		<textarea placeholder="Textarea" name="textarea" style="resize:none"> </textarea>
    		<input type="file" name="file" />
    		<input type="radio" name="Option" value="Option1" />Option 1
    		<input type="radio" name="Option" value="Option2" />Option 2
    		<input type="checkbox" name="check" value="Option1" />Option 1
    		<input type="checkbox" name="check" value="Option2" />Option 2
    
    		<input type="submit" value="Submit" />
    		<input type="reset" value="Reset"/>
    		<input type="button" value="button" onclick="getValue()"/>
    	</form>
    </body>
    </html>

     

    function getValue()
    {
        var text=document.form1.text1.value;
        alert(text);
    }

     

    展开全文
  • html表单

    千次阅读 多人点赞 2018-08-30 21:32:08
    1.1 表单标签作用: 作用:将客户端的数据提交给服务器,(表单是客户与服务器交互的一种方式)。 可见性:在网页上是不可见的。 1.2 form常用的属性: form标签是表单标签的一个根标签。 常用属性 作用...

    1.1 表单标签作用

    1. 作用:将客户端的数据提交给服务器,(表单是客户与服务器交互的一种方式)。
    2. 可见性:在网页上是不可见的。

    1.2 form常用的属性

     form标签是表单标签的一个根标签

    常用属性 作用
    action 提交给服务器的地址
     method 提交数据给服务器的方式,主要有两种方式:GET(默认)或POST

    1.3 GET与POST在格式上的区别

    提交方法 特点
    GET

    默认是GET方式,参数跟在地址栏后面,以?隔开。多个参数之间以&符号分隔,安全性低

    POST 参数在地址栏是不可见的,安全性更高。
    GET 提交的数据有大小限制,不能超过1kb。
    POST 提交的数据是没有大小限制的。
    • 注意:GET提交的数据有大小限制,原则上不能超过1kb。但是实际上,某些浏览器厂商并未遵守这个规范,有些超过了1kb,不同的厂商各有不同。

     1.4 案例:表单标签的应用

     1.4.1 案例需求

    结合表格布局,制作如图所示的注册页面。

    1.4.2 案例效果

     1.4.3 案例分析

    1. 整个表单由8行2列组成,第1行显示文本,可以在td中使用label标签。
    2. 用户名、密码、性别、爱好、照片使用input标签,设置不同的type属性。
    3. 学历使用select,个人简介使用textarea
    4. 最后1行跨2列,注册、清空、按钮的type分别是submit、reset、button

     

    • 表单的根标签是一个:form标签
    • form表单常用的属性:
    1. action:指定表单提交的服务器地址。
    2. method:指定表单的提交方式get/post,默认是get方式。 
    • 注意事项
    1. 任何一个表单项如果没有name的属性值都不允许提交。
    2. 如果一个表单项可以输入数据,那么可以没有value属性值,如果不能输入数据,那么一定要存在value属性值,提交的时候是提交了value属性值
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>用户注册案例</title>
        <style type="text/css"></style>
        <script type="text/javascript"></script>
    </head>
    <body>
    <form action="http://www.baidu.com" method="get">
        <table width="400px" height="400px">
            <tr>
                <!--colspan:单元格跨几列-->
                <td colspan="2">
                    <h4>用户注册</h4>
                    <hr/>
                </td>
            </tr>
    
    
            <!--隐藏表单项,应用场景:某些数据对用户而言是没有意义的,用户不需要看到这些数据,但是服务器又需要,那么这-->
            <!--时候就可以使用隐藏表单项-->
            <input type="hidden" name="flag" value="true"/>
    
            <tr>
                <td>用户名:</td>
                <td>
                    <!--用户名:普通文本输入框-->
                    <input type="text" name="useName" value="请输入用户名..."/>
                </td>
            </tr>
    
            <tr>
                <td>密码:</td>
                <td>
                    <!--密码:密码框-->
                    <input type="password" name="password"/>
                </td>
            </tr>
    
            <tr>
                <td>性别:</td>
                <td>
                    <!--性别:单选框,单选框input标签,type=radio 同一组的单选框只能选择其中一个
                      单选框如果需要分组,那么必须保持name的属性值一致。如果需要默认选中某一个,那么需要添加
                      checked属性-->
                    男:<input type="radio" name="sex" value="man" checked/>
                    女:<input type="radio" name="sex" value="woman"/>
                </td>
            </tr>
    
            <tr>
                <td>爱好:</td>
                <td>
                    <!--兴趣爱好:复选框-->
                    游泳:<input type="checkbox" name="hobbit" value="swimm"/>
                    上网:<input type="checkbox" name="hobbit" value="surf"/>
                    电影:<input type="checkbox" name="hobbit" value="movie"/>
                    看书:<input type="checkbox" name="hobbit" value="read"/>
                </td>
            </tr>
    
            <tr>
                <td>学历:</td>
                <td>
                    <!--学历:下拉框,下拉框使用的是select标签-->
                    <select name="education">
                        <option value="bs">博士</option>
                        <option value="ss">硕士</option>
                        <option value="bk">本科</option>
                        <option value="dz">大专</option>
                    </select>
                </td>
            </tr>
    
            <tr>
                <td>照片:</td>
                <td>
                    <!--照片:文件表单项-->
                    <input type="file" name="image"/>
                </td>
            </tr>
    
            <tr>
                <td>个人简介:</td>
                <td>
                    <!--个人简介:文本域 标签:textarea-->
                    <textarea  cols="40" rows="10" name="intr"></textarea>
                </td>
            </tr>
    
            <tr align="center">
                <!--colspan:单元格跨几列-->
                <td colspan="2">
                    <!--普通按钮-->
                    <input type="button" value="普通按钮"/>
                    <!--重置表单项-->
                    <input type="reset" value="重置"/>
                    <!--提交按钮:提交表单的数据到服务器上-->
                    <input type="submit" value="注册"/>
                </td>
            </tr>
    
        </table>
    </form>
    </body>
    </html>

     

     1.5 常用的表单控件

    表单项 控件代码 属性 备注
    文本框

    <input type="text" name="名字">

    type:控件的类型

    name:名字,给服务器使用

    value:默认值

    readonly:文本框只读

    disabled:文本框不可用,数据不能提交给服务器

    placeholder:文本框输入前提示文字

    如果没有指定type类型,默认是text

    密码框

    <input type="password">

    属性同上 输入的字符不可见
    单选框

    <input type="radio" name="gender" value="男" checked="checked"> 

    checked:默认选中

    value:指定选中这一项的值,如果没有指定,默认是on

    同一组的单选框只能选择其中一个,单选框如果需要分组,那么必须保持name的属性值一致。如果需要默认选中某一个,那么需要添加checked属性
    复选框

    <input type="checkbox" name="hobby" value="游泳">

    checked:选中

    value:选中这一项的值

    下拉列表

    <select> 容器

    默认是单选

    多选

     

    name:给服务器使用的名字

    multiple:多选

    size:指定多选的时候大小

     
    <option>代表其中一项

    value:选中这一项的值

    selected:默认选中

     
    隐藏表单 <input type="hidden" name="id"  value="值">

    name:给服务器使用的名字

    value:隐藏域的值

    表单上不可见,可以将数据提交给服务器,一般用于一些不需要用户看到的数据。
    文本域

    <input type="file" name="photo" accept="image/*">

    accept:指定文件类型

    如:image/*

     
    多行文本域

    <textarea name="intro" cols="50" rows="5"></textarea>

    rows:指定显示的行数

    cols:指定显示的列数

    注:没有value值,主体部分就是它的值。
    提交按钮

    <input type="submit" value="注册"/>

    <button>按钮文字</button>

    value:按钮上出现的文字

    button:标签是一个专门按钮

    也可以指定type类型,默认是提交按钮

    将整个表单提交给服务器
    重置按钮

    <input type="reset" value="重置"/>

      还原到开始状态
    普通按钮

    <input type="button" value="按钮"/>

      在表单中没有具体的功能,主要用于后期程序开发
    图片按钮

    <input type="image" src="img/regbtn.jpg">

    x,y:点击在图片上的坐标 具有与submit相同的功能

    1.6 html5新添加type属性

    描述
    color 定义拾色器
    date 定义日期字段(带有calendar控件)
    datetime-local 定义日期字段(带有calendar和time控件)
    month 定义日期字段的月(带有calendar控件)
    week 定义日期字段的周(带有calendar控件)
    time 定义日期字段的时分秒(带有time控件)
    email 定义用于e-mail地址的文本字段,如果输入不正确的邮箱地址有验证的功能
    number 定义带有spinner控件的数字字段
    range 定义带有slider控件的数字字段
    search 定义用于搜索的文本字段,**当输入内容的时候,搜索框后边会自动出现一个小X,点击这个小X,可以清除输入的内容。**
     tel 定义用于电话的文本字段,在手机上操作会出现输入数字的键盘。
    URL 定义用于URL的文本字段,在手机上操作会出现输入网址的键盘。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css"></style>
        <script type="text/javascript"></script>
    </head>
    <body>
    <form action="http://www.baidu.com">
        你喜欢的颜色:<input type="color" name="color"/><br/>
        生日:<input type="date" name="birthday"/><br/>
        邮箱:<input type="email" name="email"/><br/>
        手机:<input type="tel" name="tel"/><br/>
        <input type="submit" value="注册"/>
    </form>
    </body>
    </html>

    更多资料,搜索或扫码关注公众号:数说Cloud

     

    展开全文
  • HTML 表单制作

    千次阅读 2019-09-19 20:36:11
    HTML 表单 用于收集不同类型的用户输入。 表单是一个包含表单元素的区域 表单元素是允许用户在表单中输入内容, 比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等 表单使用...
  • HTML表单

    千次阅读 2018-02-19 11:31:57
    一、form标签两个最重要的属性:action 和 methodinput的type类型有很多,这里有text和password两种button的type类型默认为submit,另外还有button, reset类型====================================================...
  • HTML 表单按钮

    万次阅读 2018-04-13 20:11:53
    表单按钮表单按钮一般分为三类,分别是提交按钮、重置按钮和普通按钮。提交按钮、重置按钮只能在表单中使用,普通按钮则可以在网页的任何地方使用。从本质上讲,表单按钮也是表单控件,之所以把它分离出来,单独介绍...
  • Html中的表单

    千次阅读 2014-06-28 19:32:56
    在讲解今天Html表单之前,还是先看张图片来刺激一下。     源码 超链接演示 仿百度搜索框 请输入要搜索的内容:      看了上图百度的搜索页面,有木有心动一下,别慌你也可以的,这就是...
  • html表单整理,实例

    千次阅读 2018-11-16 10:26:33
    首先通过一个实例来表明表单的一些基本的使用,然后详细讲解表单里面的属性,最后再做出总结。   接下来解析上面的例子  1、表单的作用:用来搜集不同类型的用户输入 2、&lt;form action="#" ...
  • html中form表单的使用方法和介绍

    万次阅读 多人点赞 2017-10-04 09:43:33
    form表单的使用方法 第1节、表单赏析 第2节、了解表单 功能:用于搜集不同类型的用户输入的内容   有了表单,网页的内容可以由用户自己创建,那么对于网页来说,我们既是网页创建都者,也是网页的消费者。 ...
  • html表单,表单域

    千次阅读 2018-08-21 19:57:58
    一,基本的表单标签及属性   input 标签 输入表单 属性:text 定义输入文本  radio定义单选按钮 同组单选按钮 name属性值必须统一 这样才能实现单选,(checked="checked"可以设定初始值)  checkbox...
  • HTML表单 和 表单域

    千次阅读 2017-09-05 14:16:11
    一、什么是表单? 收集用户信息的一个容器,相当于点餐时的菜单... 表单中包含表单域(文本框、密码框、按钮 都属于表单域) 定义表单的语法: 表单域 常用的属性 1.action 用来处理请求的页面或程序...
  • html 表单验证

    千次阅读 2018-12-07 12:31:36
    我采用的表单验证不是使用 框架来实现,而是直接使用 html5 的新特性 1. 实现一个简单的用户名长度验证 我想实现表单验证,但是写js又太麻烦,有没有简单实用又灵活的方法 需求:用户名限制长度...
  • 垂直布局的HTML表单

    千次阅读 2018-02-23 22:01:51
    垂直布局的表单对于比较复杂的表单,要填写的内容相对较多,采用水平布局显然不合适。因此,垂直布局的表单更加常用。垂直对齐的表单中,标签和输入框可以使用三种对齐方式,包括顶对齐、左对齐和右对齐。CSS 顶对齐...
  • HTML 表单

    千次阅读 2019-05-16 00:07:13
    前端开发html5表单测试 以下进行了一个简单的表单测试利用了fieldset标签将表单内容的一部分打包,生成一组相关表单的字段。当一组表单元素放到 fieldset 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的...
  • 56款超赞的国外html表单模板

    千次阅读 2018-12-27 11:11:41
    如果你正在寻找有趣的表单模板,那你找...下载地址:http://www.177347.com/view-105-36037-0.html  2、【网页响应式开发】带我进入登录框表单模板 大小:655 KB 下载地址:http://www.177347.com/view-105-36040-...
  • 弹出隐藏的HTML表单

    万次阅读 2018-02-23 22:02:49
    弹出隐藏的表单大多数情况下,表单会直接显示在页面上,但并非总是如此。比如,一些购物网站,允许用户把商品加入购物车,当提交订单时,再检测用户是否登录,如果没有登录,则弹出登录界面,供用户登录。弹出表单的...
  • HTML表单之邮箱验证

    万次阅读 2018-10-16 17:36:41
    学习HTML表单是一个很重要的知识,而表单最常用的可能就是表单的验证了;下面我介绍验证邮箱的一种方法。
  • Html表单和表格例子

    千次阅读 2017-04-28 11:43:24
    Html表格和表单制作: 1.关于表格: 每个表格由 table 标签开始。 每个表格行由 tr 标签开始。 每个表格数据由 td 标签开始。 跨行:colspan 跨列:rowspan 2.关于表单: 输入 多数情况下被用到的表单标签...
  • HTML简单注册界面——含表单验证

    万次阅读 多人点赞 2018-10-28 14:43:47
    最近学习HTML表单,感慨万千。虽然看起来好像不难学,但要是真自己实践起来问题却多多。这里是我写的一个简单的注册页面,只有“注册账号、密码、重输密码”三个文本框,还包含了原生JavaScript验证。(记一下,也...
  • 动态生成html表单并提交

    千次阅读 2017-12-18 08:33:40
    之前在做一个问卷调查的时候,用到了动态生成html表单,个人感觉,html方式虽然原始,但它是万能的解决方法。 生成页查询数据库,然后得到泛型,用stringbuilder 生成html代码。    1 ListModel.Quest...
  • HTML表单及表单控件

    千次阅读 2018-09-21 11:36:12
    action 表示当确认时将表单提交到一个地址(可以使确认地址或者相对地址) method 提交表单时的请求类型 (get或者post类型) get方式的请求 一般默认为它,比较小一般不超过2k。(不在浏览器中不受限制) post...
  • HTTP协议与HTML表单(再谈GET与POST的区别)

    万次阅读 热门讨论 2009-12-05 07:48:00
    本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。 HTTP的GET/POST方式有何区别?这是一个老生常谈的问题,但老生常谈的问题往往有一些让人误解的结论。本文将带您浅尝HTTP协议,在...
  • 水平布局的HTML表单

    千次阅读 2018-02-23 22:00:54
    水平布局的表单对于非常简短的表单,用户要填写的内容比较少,CSS 表单本身也不会占用太多空间,比如网站顶端的快捷登录表单,它只包含用户名、密码和登录按钮:&lt;form action="" method="post...
  • html表单制作

    千次阅读 2018-04-23 18:54:01
    (后续会持续更新)用到的表单元素:文本区域(textarea)、列表框(select)、文本输入框(input type=text)、单选输入框(input type=radio)、复选输入框(input type=checkbox)、重置按钮(input type="...
  • HTML 表单(form) 使用详解

    万次阅读 2015-05-31 09:48:34
    一、表单  1.表单的作用  HTML 表单用于接收不同类型的用户输入,用户提交表单时向... 2.... 3.... HTML表单是一个包含表单元素的区域, 表单使用 标签创建。表单能够包含 <a target="_blank" title="HTML inp
  • HTML表单基本结构

    千次阅读 2018-01-29 18:15:41
    登录注册信息等形式是用表单制作的,如何在网页中制作表单? input标签 简单表单
  • html表单的几种提交方式

    万次阅读 2018-12-11 10:02:30
    概述:随着HTML5的兴起,前端越来越多样化,比如表单的提交,现在就有多种方式可以选择,下面总结一下常见的表单提交方式。 1.最基本的表单提交。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt...
  • HTML表单(Form)

    千次阅读 2011-08-03 11:07:26
    HTML表单(Form)是HTML的一个重要部分,主要用于采集和提交用户输入的信息。 举个简单的例子,一个让用户输入姓名的HTML表单(Form)。示例代码如下: 请输入你的姓名: 演示示例 学习HTML表单(Form)...
  • html表单图片按钮提交

    千次阅读 2013-09-13 21:20:54
    <input type="image" src="图片路径" /> 这个type=“image”跟 type=“submit” 功能是一样的,type=image是asp里面专门为解决你这种问题而设置的

空空如也

1 2 3 4 5 ... 20
收藏数 835,567
精华内容 334,226
关键字:

html表单