zoukankan      html  css  js  c++  java
  • HTML form表单小结

    HTML form标签小结

    	最近研究 form标签,有一些小心得写下来与大家分享分享,共勉。在小结的最后有一个form表单的小例子,可以作为参考。
    													-----DanlV
    
    	form是HTML的一个极为重要的功能标签之一。
    

    输入域input

    • input type属性有如下属性值:
      1.button按钮(具体接下来细说)
      2.file用于文件选取
      3.hidden隐藏域,可以实现隐藏的操作
      4.text用于文本输入
      5.password用密码输入
      6.radio单选按钮,name属性相同的为一组
      7.checkbox多选按钮,name属性相同的为一组
      8.image图片形式提交按钮
      9.reset重置form按钮
      10.submit提交form按钮
    • alt属性,定义当按钮式图片时,提片的替代文本
    • src属性,定义当按钮为图片时,图片的链接地址
    • checked属性,定义默认选项<input type="radio" name="" checked>checked的值为true或false,也可以直接写成checked
    • disabled属性,禁用当前输入域(用法如checked)
    • readonly属性,对当前输入域只读,实际作用与disabled相同,但是展现出来的效果不一样(用法如checked)
    • maxlength属性,定义输入域字符的最大长度
    • name属性,定义当前的输入域的名字
    • value属性,定义当前输入域的默认值

    文本输入区textarea

    • rows属性,规定可见行数
    • cols属性,规定可见列数
    • disabled属性,禁用当前文本输入区
    • name属性,当前文本区的名字
    • readonly属性,当前文本区域只读

    按钮button

    • type类型一共有三种:
      1.type="button"普功通功能按钮
      2.type="submit"提交form表单功能按钮
      3.type="reset"重置form表单功相关属能按钮
    • disabled属性,禁用此按钮
    • name属性,按钮的名字
    • value属性,按钮上显示文本内容的默认值

    下来菜单select

    • 相关属性:
      1.disabled属性,禁用该菜单
      2.multiple属性,规定可同时选中多项
      3.name属性,下拉列表的名字
      4.size属性,菜单中可见项目的数目
    • <optgroup>标签,定义下拉列表的选项分组,属性为:
      5.label属性,定义选项组的标记(名字),必要属性
      6.disabled属性,禁用
    • <optinon>属性,定义下拉列表中的选项(此标签在<optgroup>标签)中,属性为:
      1.disabled属性,禁用
      2.label属性,定义当使用 时所使用的标注
      3.selected属性,规定选项(在首次显示在列表中时,与checked类似)表现为选中状态。
      4.value属性,向服务器输送的值

    表单中的标记<label>

    为了是输入更为人性化,提高用户的体验度,再点击提示文字的时候光标自动聚焦到输入的位置,使用此标签。有两种使用方法:

    • <label for="user"></label> <inpu t type="text" name="user">此方式使用label的for属性,值制定输入区域的name
    • <label > <input type="text" name="user"></label>
      将input直接放入label中,不需要使用for属性,推荐使用。

    表单中相关元素分组fieldset

    将表单中相关的元素进行分组,使用<legend>标签 定义分组标题。相关实例见最后的代码。

    代码示例

    实例

    		<form action="" method="post">
    			<fieldset>
    				<legend>天下第一争霸赛</legend>	
    					
    			<label > 门派: <input type="text" name="menpai" id=""></label>
    			<br><label >密码: <input type="password" name="psw" id="">	</label>
    			<br><label >上传你的请柬: <input type="file" name="qingjian" id=""></label>
    			<br>选武器: <input type="radio" name="arms" id="">刀
    						<input type="radio" name="arms" id="">剑
    						<input type="radio" name="arms" id="">枪
    						<input type="radio" name="arms" id="">鞭
    			<br>挑战对手: <input type="checkbox" name="Army" id="">梅超风
    							<input type="checkbox" name="Army" id="">洪七
    							<input type="checkbox" name="Army" id="">金毛狮王谢逊
    							<input type="checkbox" name="Army" id="">张三丰
    			<br><label > 选择你的门派:<select name="" id=""  >
    				<optgroup label="西域">
    					<option value="天山">天山派</option>
    					<option value="昆仑">昆仑派</option>
    
    				</optgroup>
    				<optgroup label="中原" >
    					<option value="峨眉">峨眉派</option>
    					<option value="少林">少林派</option>
    					<option value="武当" selected>武当派</option>
    					<option value="天龙">天空派</option>
    					<option value="星宿">星宿派</option>
    					<option value="逍遥">逍遥派</option>
    					<option value="丐帮">丐帮派</option>
    					<option value="五毒">五毒派</option>
    					<option value="明教">明教派</option>
    				</optgroup>
    
    
    			</select></label>
    			<br> <input type="image" src="" alt="假装有图片">
    			<br> <input type="reset" value="重置"> <input type="submit" value="确定">
    			</fieldset>	
    		
    
    		</form>
  • 相关阅读:
    transient关键字
    java 序列化,反序列化工具
    switch case语法
    java空map定义
    斐波那契数列的实现算法
    正则表达式
    java业务逻辑代码中需要增加一些与主流业务无关操作
    阿里巴巴开发手册对manager层的定义
    july 19
    bulletproof monk quote
  • 原文地址:https://www.cnblogs.com/shenze/p/7069349.html
Copyright © 2011-2022 走看看