form表单的相关属性和常用的input类型

最新推荐文章于 2021-06-20 19:43:59 发布

御宸

最新推荐文章于 2021-06-20 19:43:59 发布

阅读量1.1k

点赞数 2

分类专栏：前端文章标签： form

本文链接：https://blog.csdn.net/qq_39576250/article/details/81590471

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、form相关属性
1.可以用name属性给表单进行命名
2.编码方式enctype用于设置表单信息提交时的编码方式
3.target制定目标窗口的打开方式
二、表单的input对象
1.text，password类型input常用的属性size（输入框大小），maxlength（最多输入长度）
2.单选框将type设置为radio,name属性相同的一组为一组单选框
3.复选框的type为checkbox 其余大致同上，可以多选
4.按钮button，value为按钮的取值，onclick实现一些特殊的功能（如关闭窗口），value为要显示的按钮提示
5.提交按钮submit基本属性同上，点击提交表单
6.图像域image，可以使用一幅图像作为按钮，
7.隐藏域hidden，在前端页面中不会显示
8.文本域 textarea cols,rows指定列数和行数
三、样例代码模板

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form name="表单标识名" method="get" action="url" enctype="application/x-www-form-urlencoded">
            文本：<input type="text" value="" size=""  maxlength=""/><br />
            单选框：1<input type="radio" name="radio1" value="1" checked="checked" />
                   2<input type="radio" name="radio1" value="2" />
                   <br />
            复选框 1<input type="checkbox" name="c1" value="1" checked="checked" />
                  2<input type="checkbox" name="c1" value="2"  />
                  3<input type="checkbox" name="c1" value="3"  />
                    4<input type="checkbox" name="c1" value="4"  /><br />
            普通按钮<input type="button" onclick="" name="but1" value="普通按钮" />

        <br />
        提交按钮<input type="submit" name="subbut1" value="提交按钮" />
        重置按钮<input type="reset" name="rbut1" value="重置按钮" />
        图像域image
        <input type="image" name="img1" src="img/pic01.jpg" />
        隐藏域<input type="hidden" name="hid" value="1" />
        上传文件<input name="file" type="file" size="30" maxlength="50" />
        下拉菜单<select name="">
            <option value="1">
                选项1
            </option>
            <option value="2">
                选项2
            </option>
            <option value="3">
                选项3
            </option>
        </select >
        列表项<select multiple="multiple" name="">
            <option value="1">
                选项1
            </option>
            <option value="2">
                选项2
            </option>
            <option value="3">
                选项3
            </option>
        </select>
        </form>
    </body>
</html>

御宸

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
form表单的相关属性和常用的input类型

一、form相关属性 1.可以用name属性给表单进行命名 2.编码方式enctype用于设置表单信息提交时的编码方式 3.target制定目标窗口的打开方式二、表单的input对象 1.text，password类型input常用的属性size（输入框大小），maxlength（最多输入长度） 2.单选框将type设置为radio,name属性相同的一组为一组单选框 3.复选框的...
复制链接

扫一扫