最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

总结HTMLform表单的一些用法

来源:动视网 责编:小采 时间:2020-11-27 15:31:03
文档

总结HTMLform表单的一些用法

总结HTMLform表单的一些用法:HTML form标签小结 最近研究 form标签,有一些小心得写下来与大家分享分享,共勉。在小结的最后有一个form表单的小例子,可以作为参考。 -----DanlV form是HTML的一个极为重要的功能标签之一。输入域inputinput type属性有如下属性值:1.butto
推荐度:
导读总结HTMLform表单的一些用法:HTML form标签小结 最近研究 form标签,有一些小心得写下来与大家分享分享,共勉。在小结的最后有一个form表单的小例子,可以作为参考。 -----DanlV form是HTML的一个极为重要的功能标签之一。输入域inputinput type属性有如下属性值:1.butto


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属性,定义当使用


  • 表单中的标记<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>

    文档

    总结HTMLform表单的一些用法

    总结HTMLform表单的一些用法:HTML form标签小结 最近研究 form标签,有一些小心得写下来与大家分享分享,共勉。在小结的最后有一个form表单的小例子,可以作为参考。 -----DanlV form是HTML的一个极为重要的功能标签之一。输入域inputinput type属性有如下属性值:1.butto
    推荐度:
    • 热门焦点

    最新推荐

    猜你喜欢

    热门推荐

    专题
    Top