精华内容
下载资源
问答
  • 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 表单

    • 用于收集不同类型的用户输入。
    • 表单是一个包含表单元素的区域
    • 表单元素是允许用户在表单中输入内容,
      比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等
    • 表单使用表单标签 来设置

    HTML 表单-输入元素

    • 多数情况下被用到的表单标签是输入标签()。
    • 输入类型是由类型属性(type)定义的。

    文本域(Text Fields)

    <form>
    	<h3>用户注册页面</h3>
    	用户名:<input name = "username "type = "text"><br />
    		
    </form>
    
    

    在这里插入图片描述

    密码字段

    <form>
    	密码:<input name = "passwd1" type="password"><br />
    	确认密码:<input name = "passwd2" type = "password"><br />
    		
    </form>
    

    在这里插入图片描述

    单选按钮(Radio Buttons

    <form>
    性别:<input name = "sex" value = "1" type = "radio" >男
    		  <input name = "sex" value = "0" type = "radio" checked = "checked">女<br />
     </form>
    

    在这里插入图片描述

    复选框(Checkboxes)

    <form>
    爱好:<input name = "hobby" type = "checkbox" value="吃饭">吃饭
    		<input name = "hobby" type = "checkbox" value="睡觉">睡觉
    		<input name = "hobby" type = "checkbox" value="打游戏">打游戏<br />
     </form>
    

    在这里插入图片描述

    简单的下拉列表

    <form>
    出生日期:
    			<select name = "year" >	
    					<option value="2019">2019</optiom>
    					<option value="2018">2018</optiom>
    					<option value="2017">2017</optiom>
    					<option value="2016">2016</optiom>		
    			</select>
    			<select name = "month">	
    					<option value="1">1</optiom>
    					<option value="2">2</optiom>
    					<option value="3">3</optiom>
    					<option value="4">4</optiom>
    					<option value="5">5</optiom>	
    					<option value="6">6</optiom>
    					<option value="7">7</optiom>
    					<option value="8">8</optiom>
    					<option value="9">9</optiom>
    			</select>
    			<select name = "day">	
    					<option value="1">1</optiom>
    					<option value="2">2</optiom>
    					<option value="3">3</optiom>
    					<option value="4">4</optiom>	
    					<option value="5">5</optiom>	
    					<option value="6">6</optiom>
    					<option value="7">7</optiom>
    					<option value="8">8</optiom>
    					<option value="9">9</optiom>
    					
    			</select>	
     </form>
    

    在这里插入图片描述

    重置

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

    在这里插入图片描述

    提交按钮(Submit Button)

    <input type="submit" value="同意以下服务协议,提交注册信息">
    

    在这里插入图片描述

    文本域(Textarea)

    <textarea name="wenben"></textarea>
    

    在这里插入图片描述

    完整代码

    <html>
    	<head>
    		<title>注册页面</title>
    		<meta charset="utf-8">
    	</head>
    	<body>
    		<form
    			action="#"
    			method="post"
    			enctype="multiple/form-data"			
    		>
    		<h3>用户注册页面</h3>
    		用户名:<input name = "username"type = "text"><br />
    		<!--头像上传<input type="file" name="photos"><br />-->
    		
    		密码:<input name = "passwd1" type="password"><br />
    		确认密码:<input name = "passwd2" type = "password"><br />
    		性别:<input name = "sex" value = "1" type = "radio" >男
    		     <input name = "sex" value = "0" type = "radio" checked = "checked">女<br />
    		爱好:<input name = "hobby" type = "checkbox" value="吃饭">吃饭
    			<input name = "hobby" type = "checkbox" value="睡觉">睡觉
    			<input name = "hobby" type = "checkbox" value="打游戏">打游戏<br />
    		出生日期:
    			<select name = "year" >	
    					<option value="2019">2019</optiom>
    					<option value="2018">2018</optiom>
    					<option value="2017">2017</optiom>
    					<option value="2016">2016</optiom>		
    			</select>
    			<select name = "month">	
    					<option value="1">1</optiom>
    					<option value="2">2</optiom>
    					<option value="3">3</optiom>
    					<option value="4">4</optiom>
    					<option value="5">5</optiom>	
    					<option value="6">6</optiom>
    					<option value="7">7</optiom>
    					<option value="8">8</optiom>
    					<option value="9">9</optiom>
    			</select>
    			<select name = "day">	
    					<option value="1">1</optiom>
    					<option value="2">2</optiom>
    					<option value="3">3</optiom>
    					<option value="4">4</optiom>	
    					<option value="5">5</optiom>	
    					<option value="6">6</optiom>
    					<option value="7">7</optiom>
    					<option value="8">8</optiom>
    					<option value="9">9</optiom>AA		
    			</select>					
    		<br />
    		<input type="reset" value="重置"> &nbsp; &nbsp; &nbsp;
    		<input type="submit" value="同意以下服务协议,提交注册信息">		
    		<br />
    		<textarea name="wenben">
    		</textarea>
    		<input  type="hidden" name="token" value="cbff36039c3d0212b3e34c23dcde1456">		
    		</form>
    	</body>
    </html>
    

    实验结果

    在这里插入图片描述

    [学习链接](https://www.runoob.com/html/html-forms.html)

    展开全文
  • html表单数据传递 介绍 在某些时候,所有Web开发人员都需要从用户那里收集数据。 在动态网页中,一切都围绕用户的输入,因此了解如何请求和收集此数据对于任何开发人员都是至关重要的。 本文是有关如何使用HTML...

    html表单数据传递

    介绍

    在某些时候,所有Web开发人员都需要从用户那里收集数据。 在动态网页中,一切都围绕用户的输入,因此了解如何请求和收集此数据对于任何开发人员都是至关重要的。

    本文是有关如何使用HTML表单(最常用的数据收集方法)的基础教程。

    假设条件

    -基本HTML知识。

    -基本PHP知识。

    HTML表格

    收集数据的常见且简单的方法是通过HTML表单。 表单是用户输入的容器,可以包含许多不同的输入类型。

    HTML表单元素需要一些参数才能正常工作:

    • 行动 :这应该指向用于处理收集的数据的页面。 提交表单后,浏览器将与所有数据一起重定向到此位置。
    • 方法 :这是运输方法。 这里有两个选择:“ GET”和“ POST”。 我将在下一章中介绍它们。
    一个典型的表单元素可能看起来像这样:
    
    <form id="Form1" action="submit.php" method="post">
    <!-- Input elements will be put here -->
    </form> 
    数据传递方法GET和POST。

    正如您可能从两种协议的名称中猜到的那样,GET和POST请求被设计用于不同的目的。

    GET协议的目的是获取数据并将其显示给用户。 可以通过查询字符串传递简单的键值对,但是理想情况下,应使用它们指定页面上应显示的内容,而不是将用户数据推送到服务器上。

    这就是POST协议的目的。 它旨在允许客户端以几乎任何格式将几乎任何数量的数据发送到服务器。 这是大多数表单应使用的格式,并且对于文件上传和上传大量文本而言,这是必需的。

    本质上,GET应该用于导航和类似性质的事情,但是POST应该用于发送实际数据。 现在,让我们分别更详细地检查它们。

    GET协议

    使用GET时,来自表单的数据被编码到请求的URL中。 例如,如果您要提交以下表格:

    <form action="action.php" method="get">
        <input type="text" name="Username" value="John"><br>
        <input type="password" name="Password" value="thePassword"><br>
        <input type="submit">
    </form>
    当您点击“提交”按钮时,浏览器会将您重定向到以下URL:

    --

    action.php?Username = John&Passsword = thePassword

    GET协议的一个非常有用的方面是,我们不必使用表单来提交GET数据。 该URL也可以手动构造,服务器不会看到任何区别。 这意味着也可以使用以下HTML链接提交上述数据:

    <a href="action.php?Username=John&Passsword=thePassword">Submit</a>
    在显示动态创建的内容的网站(例如论坛或博客)中,这可能是非常有用的燃料,您经常需要在其中创建动态导航链接。 实际上,此方法已在大多数动态Web 2.0应用程序中使用。 POST协议

    通过POST协议提交的数据在URL中不可见。 数据本身被放入请求的主体中,该主体允许POST请求比GET请求上传更多的数据和更复杂的数据。

    例如,要发送用户名和图像,可以使用如下形式:

    <form action="action.php" method="post" enctype="multipart/form-data">
        <input type="text" name="Username"><br>
        <input type="file" name="UserImage">
        <input type="submit">
    </form>
    您将在此处注意到已将其他属性添加到表单。 发送文件时需要“ enctype”属性。 如果丢失,将不会发送文件。 -此属性仅告诉客户端如何格式化请求的正文。 默认情况下,它是一种相当简单的格式,但是要发送二进制对象,则需要更复杂的格式。 <input>元素

    与所有表单一样,HTML表单也需要用户填写字段。 这就是

    <input>元素用于。

    输入元素位于内部

    <form>元素,可以用作许多不同类型的字段。 通过将字段的“类型”属性更改为以下值之一来设置类型
    • text :这是一个简单的文本框。 允许用户输入任何文本。
    • password :这类似于“文本”输入,只是用于密码。 文本被混淆,因此您键入的实际文本不可见。 (通常通过用星号替换每个字符。)
    • button :这将创建一个按钮。 它没有特殊目的。 它主要用于执行JavaScript代码。
    • 提交 :这将形成一个按钮,单击该按钮即可提交表单。 如果指定名称和值,它们将包含在数据中。 否则不行。
    • reset :这形成一个按钮,用于重置表单中的所有字段。 请谨慎使用!
    • 复选框 :这将创建一个复选框。 仅选中的框将与数据一起发送。 未选中的框将被忽略。
    • radio :这将创建一个单选按钮。 如果使用相同的名称创建多个这些名称,则在任何给定时间只能选择其中一个,并且数据中将仅包含所选的一个。 所选框的“值”属性将被发送。
    • 隐藏 :不显示此字段。 它是隐藏的,但其值将被发送。 当您需要从PHP或JavaScript代码中包含一个值,但又不想让用户看到它时,这些功能非常有用。
    • file :此类型允许选择文件并将其上传到服务器。
    一个使用输入元素填充的表单的简单示例:
    <form id="Form1" action="submit.php" method="post">
      Username: <input type="text" name="Username"><br>
      Password: <input type="password" name="Password"><br>
      Remember me: <input type="checkbox" name="Remember" checked="checked">
      <input type="hidden" name="SubmitCheck" value="sent">
      <input type="Submit" name="Form1_Submit" value="Login">
    </form>
    读取表格数据

    要使用PHP读取表单提交的数据,我们使用三个特殊数组之一。 那些是:

    $ _GET$ _POST$ _REQUEST 。 前两个包含通过各自协议提交的数据。 第三个$ _REQUEST包含两个数据。

    数组的index(key)是输入元素的name属性。 因此,如果要发送先前创建的表单,则可以打印您传递的用户名,如下所示:

    echo $_POST['Username'];
    如果您很懒,可以直接调用“ $ _REQUEST ['Username']”,但这是有代价的。 根据您PHP配置,$ _GET或$ _POST数组将替代另一个,从而覆盖重复的值。 这意味着,如果POST和GET协议都发送具有相同名称的值,则其中一个将不可用,并且您可能会在代码中使用错误的值。 -更糟的是,Cookie和Enviromental变量也被混合使用,从而进一步增加了风险。

    这个故事的寓意是:使用

    $ _GET$ _POST数组,而不是$ _REQUEST数组。 这样最安全。 使用收集的数据

    在结束之前,让我们使用之前的登录表单来做一个简单的示例。

    此表单测试用户名“ John”和密码“ Doe”,并相应地进行响应。 -请注意,我已经更改了表单的'action'属性,使其指向自身,这将导致页面与数据一起重新加载。

    
    <?php
    /**
     * WARNING!
     * This EXAMPLE code contains severe SECURITY ISSUES
     * which should be addressed before real-life usage!!
     *
     * These issues have been ignored intentionally to
     * simplify the code so we can focus on the topic
     * in discussion.
     */ 
    // Lets test if the form has been submitted
    if(isset($_POST['SubmitCheck'])) {
        // The form has been submited
        // Check the values!
        if($_POST['Username'] == "John" and $_POST['Password'] == "Doe") {
            // User validated!
            echo "Thats right! You have been logged in!"; 
            // Check if the checkbox was checked
            if(isset($_POST['Remember'])) {
                echo "<br>You will be remembered!";
            }
            else {
                echo "<br>John who?!";
            }
        }
        else {
            // User info invalid!
            echo "Sorry mate, try again!";
        }
    }
    else {
        // The form has not been posted
        // Show the form
    ?>
    <form id="Form1" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
        Username: <input type="text" name="Username"><br>
        Password: <input type="password" name="Password"><br>
        Remember me: <input type="checkbox" name="Remember" checked="chekced">
        <input type="hidden" name="SubmitCheck" value="sent">
        <input type="Submit" name="Form1_Submit" value="Login">
    </form>
    <?php
    }
    ?> 
    终点线

    因此,这就是我有关HTML表单的基本文章。

    最后警告!

    谨慎使用通过HTML表单发布的数据。

    始终假设您收到的数据以某种方式破坏了您的网络并进行了相应的验证!

    请记住,您的网络仅与显示的信息一样好,因此请确保数据正确无误。

    祝一切顺利,

    -AtliÞór

    翻译自: https://bytes.com/topic/php/insights/664241-using-html-forms-pass-data-php

    html表单数据传递

    展开全文
  • html表单下拉菜单Drop-down menus are used on forms to capture responses for which there is one correct response from multiple possible answers. A good example of this is asking for a visitor’s ...

    html表单下拉菜单

    Drop-down menus are used on forms to capture responses for which there is one correct response from multiple possible answers. A good example of this is asking for a visitor’s province, state or country.

    表单上使用下拉菜单来捕获响应,对于这些响应,可以从多个可能的答案中获得一个正确的响应。 一个很好的例子就是要求访问者所在的省,州或国家。

    考虑替代方案 (Considering Alternatives)

    It's important to consider all the possibilities when making a form. We could simply present a textbox in which the user could type the province name, but that allows the possibility that they could make a typing mistake (which becomes an issue if this information is entered directly into a database, without human oversight). We could reduce the size of the textbox to to allow just two characters, and prompt the user just to type in the province or state abbreviation: while that reduces the possibility of error, it does not remove it.

    制作表格时,必须考虑所有可能性。 我们可以简单地显示一个文本框,用户可以在其中输入省名,但是这允许他们可能会键入错误(如果将此信息直接输入到数据库中而没有人为监督,则会成为问题)。 我们可以将文本框的大小减小为仅允许两个字符,并提示用户仅输入省或州的缩写:虽然这会减少出错的可能性,但不会将其删除。

    One of the best solutions to use for a question in a form for which there is only one right answer from a large number of possibilities is a drop-down menu.

    下拉菜单是在多种可能性中只有一个正确答案的形式中用于问题的最佳解决方案之一。

    下拉标记 (Drop-down Markup)

    In an HTML form, this is created through the use of the <select> tag.

    在HTML表单中,这是通过使用<select>标记创建的。

    As always, we place our <label> in first, with a for attribute and an appropriate accesskey. Just like the <input> tag, <select> should have an id and name attribute. Each item inside the drop-down menu is then delimited by <option> tags.

    与往常一样,我们将<label>放在第一位,带有for属性和适当的accesskey 。 就像<input>标记一样, <select>应该具有idname属性。 然后,下拉菜单中的每个项目都由<option>标记分隔。

    <label for="province" accesskey="p">Province / Territory</label>
    <select name="province" id="province">
    	<option>Alberta
    	<option>British Columbia
    </select>

    The form itself is not aware of any text between the opening and closing option tags. While the first option can be selected by our user, no actual data will be sent to the formhandler.php script which interprets the data in the form. We probably don’t want the word “Alberta” in any case; “AB” would be preferable for adding to a mailing list or database. To do this, we must add value attributes to each of these options:

    表单本身不知道在开始和结束option标签之间的任何文本。 尽管我们的用户可以选择第一个选项,但不会将实际数据发送到formhandler.php脚本,该脚本会解释表单中的数据。 在任何情况下,我们可能都不希望使用“艾伯塔省”一词。 添加到邮件列表或数据库时,最好使用“ AB”。 为此,我们必须将value属性添加到以下每个选项中:

    <select name="province">
    	<option value="AB">Alberta
    	<option value="BC">British Columbia
    </select>

    (Note that the value attribute can also be used to pre-set the text for an <input> textbox).

    (请注意, value属性还可以用于为<input>文本框预先设置文本)。

    Finally, the first option in our drop-drown menu will be auto-selected by default. This is not always a good thing. First, keep in mind our assumptions about our user. If we have pre-selected something, it is likely that he will skip over it to save time or simply miss it. It is better to prompt the user to make a selection and make that prompt selected by default, unless you can be absolutely certain that the vast majority of the respondents to your form will meet a pre-selected criteria.

    最后,默认情况下将自动选择下拉菜单中的第一个选项。 这并不总是一件好事。 首先,请记住我们对用户的假设。 如果我们预先选择了某些内容,他可能会跳过它以节省时间或只是错过了它。 最好提示用户进行选择,并默认使该提示处于选中状态,除非您可以绝对确定表单的绝大多数答复者都将满足预选条件。

    <select name="province">
    	<option value="none" selected="selected"> -- choose one --
    	<option value="AB">Alberta
    	<option value="BC">British Columbia
    </select>

    You will find textbooks and online help that provide code to make multiple options in the drop-down list selectable, or which turns the select drop-down into a scrolling interface. Generally speaking, these practices are strongly inadvisable. People become confused when presented with them, leading to data entry errors.

    您会找到教科书和在线帮助,这些教科书和在线帮助提供了使下拉列表中的多个选项变为可选的代码,或者将选择下拉列表变成了滚动界面。 一般来说,强烈建议不要使用这些做法。 人们在与他们在一起时会感到困惑,从而导致数据输入错误。

    The optgroup element should be used to indicate groups of related options in a drop-down; the optgroup itself is not selectable. Rather confusingly, the optgroup has a required attribute, label, that is used to indicate the group reference.

    optgroup元素应用于在下拉列表中指示相关选项的optgroup本身是不可选择的。 令人困惑的是, optgroup具有必需的属性label ,用于指示组引用。

    For example, to show states in the US and provinces/territories in Canada in the same drop-down, we could do the following.

    例如,要在同一下拉列表中显示美国各州和加拿大的省/地区,我们可以执行以下操作。

    <label for="state" accesskey="s">State / Province / Territory</label>
    <select name="state" id=state">
    	<option value="">-- choose one --
    	<optgroup label="USA">
    		<option value="AL">Alabama
    		<option value="CA">California
    		<option> … remaining US states … 
    	</optgroup>
    	<optgroup label="Canada">
    		<option value="AB">Alberta
    		<option value="CA">British Columbia
    		<option> … remaining provinces and territories … 
    	</optgroup>
    </select>

    In the browser, the result would look something like this:

    在浏览器中,结果如下所示:

  • For a select menu this long and complicated, it is usually a good idea to use JavaScript to dynamically alter the content of the select based on user choices earlier in the form. For example, having the user choose their country first should reduce the number of visible options in the “state” drop-down to show only the relevant territories in their particular nation. This makes for a more intelligent and intuitive form, and a better user experience.

    对于一个如此漫长而复杂的select菜单,通常最好使用JavaScript根据表单中较早的用户选择动态更改select内容。 例如,让用户首先选择他们的国家应该减少“州”下拉列表中可见选项的数量,以仅显示其特定国家/地区中的相关领土。 这使表格更智能,更直观,并提供了更好的用户体验。

    Naturally, a <select> menu is not only used for geographical location; there are many instances in which it can be used to capture single answers from multiple possibilities: sizes when shopping for T-shirts, for example.

    自然, <select>菜单不仅用于地理位置; 在很多情况下,它可以用来捕获多种可能性的单个答案:例如,购买T恤时的尺码。

    翻译自: https://thenewcode.com/166/HTML-Forms-Drop-down-Menus

    html表单下拉菜单

    展开全文
  • html 表单验证

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

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

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

    千次阅读 2019-03-19 16:46:55
    利用这些实现网页的登录...DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> </style> </hea...
  • 垂直布局的HTML表单

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

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

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

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

    千次阅读 2020-06-20 10:22:56
    考虑一下如果每次表单被装入时站点生成一个伪随机值来覆盖以前的伪随机值将会发生什么情况:用户只能成功地提交他最后打开的表单,因为所有其他的表单都含有非法的伪随机值。必须小心操作以确保CSRF保护措施不会影响...
  • HTML表单内根据输入框对齐的实现

    千次阅读 2020-10-19 20:08:35
    } 补充知识: 1:表单提交 Step 1:给form标签添加提交事件onSubmit(checkForm()) Step 2:form标签内添加类型为submit的input框 2:HTML5引入类型为color的表单元素,默认颜色设置value="#000000" 必须是6位数的,...
  • 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表单的边框加颜色,可以更改任何你想要的颜色都可以,有实例解析,方便观看,接下来让我们一起来看看这篇关于HTML表单的边框颜色的文章吧 打造全网web前端全栈资料库(总目录)看完学的更...
  • HTML表单及表单控件

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

    千次阅读 热门讨论 2019-10-12 10:43:41
    B/S架构为了实现web服务器和浏览器的交互,必然的产生了一些相应的规则,在html表单的提交与验证显得尤为重要,这里主要谈一谈关于form表单的提交知识点。 在表单提交的功能上,我们将它分为,两个请求。其一,...
  • HTML表单基本结构

    千次阅读 2018-01-29 18:15:41
    登录注册信息等形式是用表单制作的,如何在网页中制作表单? input标签 简单表单
  • 教你们做一个html表单(基础篇)

    千次阅读 多人点赞 2020-04-20 20:47:38
    表单作用 HTML中的表单(form)是网页中最常用的组件,是网站服务器端与客户 端之间沟通的桥梁。表单在网上随处可见,它们被用于在登录页面输 入用户名和密码,对博客进行评论等。 举个栗子: form(表单) 1.作用: ...
  • HTML 表单发送邮件

    千次阅读 2019-07-29 11:07:34
    代码: <!DOCTYPE html> <html> <head>...meta charset="utf-8">...表单发送邮件</title> </head> <body> <h3>发送邮件到 someone@example.com:</h3> <f...
  • html表单制作

    千次阅读 2018-04-23 18:54:01
    (后续会持续更新)用到的表单元素:文本区域(textarea)、列表框(select)、文本输入框(input type=text)、单选输入框(input type=radio)、复选输入框(input type=checkbox)、重置按钮(input type="...
  • html表单验证自定义错误提示

    千次阅读 2019-05-02 10:13:32
    原文链接:html表单验证自定义错误提示 引言 通常情况下,我们在进行表单验证时(比如提交登录注册信息),为了安全考虑以及进一步保证表单信息填写的正确性,会再服务端验证之前,在前端页面先做一次验证。但是...
  • 关于HTML表单用户信息进行MD5加密

    千次阅读 2020-01-10 23:57:55
    接下来将关于前端提交表单时的MD5加密内容。 MD5加密简介 MD5的典型应用是对一段信息(Message)产生信息摘要(Message-Digest),以防止被篡改。js目前是没有相关文件可直接引用的,但网上有现成的MD5加密js文件...
  • HTML表单 和 表单域

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

    千次阅读 2017-04-28 11:43:24
    Html表格和表单制作: 1.关于表格: 每个表格由 table 标签开始。 每个表格行由 tr 标签开始。 每个表格数据由 td 标签开始。 跨行:colspan 跨列:rowspan 2.关于表单: 输入 多数情况下被用到的表单标签...
  • 用PHP来获取html表单数据

    千次阅读 2018-12-11 15:22:20
    用PHP来获取html表单数据 今天在做文章全选的时候遇到这个问题,如何才能获得勾选文章的ID? 直接上代码: &amp;lt;!doctype html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &...
  • html表单的几种提交方式

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

    千次阅读 2018-11-07 17:29:00
    编写一个from表单 <form id="payment"> <fieldset> <legend>用户详细资料</legend> <ol> <li> <label for="name"...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 629,846
精华内容 251,938
关键字:

html表单