• 五、Html表单标签


    表单,表单控件的主要作用就是收集用户体验,当用户提交表单时,用户输入的内容将作为请求参数提交到远程服务器。
    • 1,form标签
    <form>:创建表单,该元素不会生成可视化的界面,但是其他控件都必须放在这个标签里面。常用的属性:
    action:该属性必填,用于指定单机表单的确认按钮时表单提交到那个地址。可以是绝对地址,也可以是相对地址。
    method:用于指定提交表单时发送何种类型的请求,可以是get或者post,关于get和post这2者的区别,在我的http的博客里面 有讲到,这里不做赘述。
    enctype:用于指定对表单内容进行编码时所使用的字符集。默认地,表单数据会编码为 "application/x-www-form-urlencoded":就是说,在发送到服务器之前,所有字符都会进行编码(空格转换为 "+" 加号,特殊符号转换为 ASCII HEX值)
    这个属性的属性值有3种:
    application/x-www-form-urlencoded:在发送前编码所有字符(默认)
    multipart/form-data:不对字符编码,在使用包含文件上传控件的表单时,必须使用该值。
    text/plain 空格转换为 "+" 加号,但不对特殊字符编码。
    name:该表单的唯一名称,建议和id保持一致。
    target:何种方式打开url,_self,_blank,_top,_parent。
    关于这个form标签,有一点需要强调,就是表单控件如何转换成相应的请求参数,具体的规则如下:
    1,每个有name属性的表单控件对应一个请求参数,没有name属性的表单控件不会生成请求参数,如果有多个表单控件重复了一个name属性值,那么也只生成一个请求参数,只不过这个参数有多个值。
    2,表单控件的name属性指定了请求参数名,value指定请求参数值。
    3,如果某个表单控件设置了disabled="disabled"属性,这个表单控件不会再生成请求参数。

    • 2,input标签
    <input>元素是表单控件中功能最丰富的,下面的多种输入元素都是通过这个标签来生成的。这个标签是一个空标签。
    1,单行文本框:type="text"
    2,密码输入框:type="password"
    3,隐藏域:type="hidden"
    4,单选框:type="radio"
    5,复选框:type="checkbox"
    6,图像域:type="image"
    7,文件上传域:type="file"
    8,提交,重设,无动作按钮:type="submit",type="reset",type="button"
    <input>元素可以指定id,style,class等核心属性,同时也可以指定onclick,onfocus,onblur等事件属性,还有以下几种:
    1,checked,用于设置单选和多选是否是选中状态
    2,disabled,用于设置禁用此元素
    3,maxlength,用于指定文本框中允许输入的最大字符数
    4,readonly,只读模式,不能修改
    5,size,指定元素的宽度
    6,src,图像域显示图像的url
    7,align,图像域的对齐方式
    以下是包含上面元素的一份html:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>表单相关标签</title>
    </head>
    
    
    <body>
    <form action="" method="get">
    单行文本框:<input type="text" name="userName" id="userName" /><br />
    不能编辑的文本框:<input type="text" name="userName1" id="userName1" readonly="readonly" /><br />
    密码框:<input type="password" name="passWord" id="passWord" /><br />
    隐藏域:<input type="hidden" name="linkin_id" id="linkin_id" /><br />
    单选:<input type="radio" name="age" id="age1" value="男" />男
    <input type="radio" name="age" id="age2" value="女" />女<br />
    多选:<input type="checkbox" name="age1" id="age3" value="男" />男
    <input type="checkbox" name="age1" id="age4" value="女" />女<br />
    文件上传域:<input type="file" /><br />
    图像域:<input type="image" src="" /><br />
    4个按钮:
    <input type="submit" value="提交" name="button1" />
    <input type="submit" value="提交" name="button2" disabled="disabled" />
    <input type="reset" value="重置" name="button3" />
    <input type="button" value="无动作" name="button4" />
    </form>
    </body>
    </html>

    • 3,列表框和下拉菜单
    <select>用于创建列表框和下拉菜单,该元素必须和<option>结合使用,每个<option>代表一个列表项或者一个菜单项
    经常用到2个属性,disabled,用于设置禁用该列表框和下拉菜单。
    multiple:用于设置是否多选。
    值得注意的是:一个<select>到底是生成列表框还是生成下拉菜单,是由上面这2个元素来决定的。要是指定了size或者multiple,那么就生成了列表框,否则就是下拉菜单。
    <option>:一个选项。value表示请求参数值,disabled这个选项是否禁用,selected,这个选项是否选中
    <optgroup>:一个选项组。label,必填,用来指定这个选项组的标签。
    以下是包含上面标签的一份html:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>下拉相关标签</title>
    </head>
    
    
    <body>
    	<form action="" method="get">
    		下拉:
    		<select>
    			<option value="LinkinPark">林肯</option>
    			<option value="NightWish">夜愿</option>
    		</select>
    		列表框1:
    		<select multiple="multiple">
    			<option value="LinkinPark">林肯</option>
    			<option value="NightWish">夜愿</option>
    		</select>
    		列表框2:
    		<select multiple="multiple"size="10">
    			<optgroup label="名字">
    			<option value="LinkinPark">林肯</option>
    			<option value="NightWish">夜愿</option>
    			</optgroup>
    			<optgroup label="国家">
    			<option value="LinkinPark">美国</option>
    			<option value="NightWish">芬兰</option>
    			</optgroup>
    		</select>
    	</form>
    </body>
    </html>


    • 4,使用textarea定义文本域
    <textarea>:用于在html中定义多行文本域,2个属性必填,cols和rows,用于指定文本域的宽度和高度。多行文本域比较特殊,除了普通的事件属性,他还可以指定onselect属性,用于表示文本域里面的内容被选中时候的事件。
    与单行文本框相同的是,<textarea>元素也应该指定name属性,该属性将作为textarea的请求参数名,与单行文本框不同的是,<textarea>不能指定value属性,<textarea></textarea>之间的内容将作为所对应的请求参数的参数值。
    关于这个标签还是经常会用到的,在以前我写表单的时候,将单行的文本框拉长拉宽,但是我们在输入的时候也只能是一行,不能换行的,忽忽。
    以下是包含这个标签的一份html:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>多行文本框相关标签</title>
    </head>
    
    
    <body>
    	<form action="" method="get">
    		单行文本框:<input type="text" size="20" height="20" /><br />
    		多行文本框:<textarea rows="10" cols="20"></textarea>
    	</form>
    </body>
    </html>

    • 5,使用label定义标签
    <label>用于在表单元素中定义标签,这些标签只是对其他可以生成请求参数的控件来做说明的,本身是不会产生请求参数的,所以不要为<label>元素指定value的属性值。
    从表面上看,<label>元素只是输出普通文本,其实他最大的作用就是,当我们点击<label>生成的文本时,他说关联的表单控件将自动获得焦点。
    让标签和表单控件关联有2种方式:
    1,隐式使用for属性:设置<label>标签的for属性指向所关联表单控件的id属性值。
    2,显式关联:将普通文本,表单控件丢在<label></label>标签内部就可以了。关于这2种方式推荐使用第一种,也就是使用for来隐式关联,因为后面一种可能在ie下不兼容。
    以下是包含上面标签的一份html:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>label相关标签</title>
    </head>
    
    
    <body>
    	<form action="" method="get">
    		<label for="huhu">单行文本框:</label>
    		<input type="text" size="20" height="20" id="huhu" /><br />
    		<label>多行文本框:<textarea rows="10" cols="20"></textarea></label>
    	</form>
    </body>
    </html>
    • 6,使用button定义按钮
    <botton>元素用于定义一个按钮,在这个标签的内部可以包含普通的文本,文本格式化标签,图像等内容,这也就是<button>和<input>按钮的不同之处。
    这个标签使用不多,最多就是在一个按钮做成图像格式的才会用到。以下是一份html:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>button相关标签</title>
    </head>
    
    
    <body>
    	<form action="" method="get">
    		<button type="submit" ><img alt="huhu" src="img/NightWish.jpg" /></button>
    	</form>
    </body>
    </html>


  • 相关阅读:
    一位测友的真实面试题
    内部cms系统测试
    po模式
    描述器
    monkey命令
    进程管理工具supervisor
    webpack打包绝对路径引用资源和element ui字体图标不显示的解决办法
    pycharm flask debug调试接口
    应对ADT(Eclipse)的No more handles解决办法
    收集整理Android开发所需的Android SDK、开发中用到的工具、Android开发教程、Android设计规范,免费的设计素材等。
  • 原文地址:https://www.cnblogs.com/LinkinPark/p/5233063.html
Copyright © 2020-2023  润新知