总结HTMLform表单的一些用法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了总结HTMLform表单的一些用法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3599字，纯文字阅读大概需要6分钟。

内容图文

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>

以上就是总结HTML form表单的一些用法的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的总结HTMLform表单的一些用法全部内容，希望文章能够帮你解决总结HTMLform表单的一些用法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端