HTML中表单的各类按钮(新手)

    xiaoxiao2021-03-25  164

    表单中的各类按钮:

    1.普通类型的按钮( button):

                    添加的文字<input type="button" value="按钮的名称" οnclick="alert(数字)">添加的文字

                    οnclick="alert(数字)"  提示是否成功设置按钮,alert中必须是数字,否则不提示。

    2.图片按钮(image)

                    添加文字<input type="image" src="图片地址(相对地址或绝对地址)"οnclick="alert(数字)" value="xxx">添加文字

    3.清空按钮(reset)

                     添加文字<input type="reset" value="名称" οnclick="alert(123)">添加文字

                      作用:清空输入框中的内容

    4.提交按钮(submit)

                    添加文字<input type="submit" value="名称" οnclick="alert(123)">添加文字

                     作用:将输入框中的内容提交到服务器里面。

    5.隐藏域(hidden)

                     将一些数据悄悄的提交给服务器。这些数据不提供给用户查看。

                    <input type="hidden" name="xxxxxx" value="xxxxxxx">

                     浏览器的地址栏上面显示隐藏的内容(name与value的值在地址的最后面显示)。

    6.想要把数据提交到服务器上需要满足两个条件:

                      1.  在<form>  标签中添加action属性,通过action指明服务器地址。

                      2.  需要给需要提交到服务器的表单元素添加一个name属性。

                      <form action="服务器地址">

                                      账号:<input type="text" name="xxx(随便写)">

                                      密码:<input type="password" name="xxxx(随便写)">

                      </form>

                     在服务器浏览器地址栏上有提交的数据(地址上面有xxx=输入的账号,xxxx=输入的密码(账号与密码的name属性的值在地址中显示))

    7. 提交到服务器上面,地址上面有提交的数据信息,如:xxx="输入的账号",xxxx="输入的密码",隐藏域<input type="hidden" name="xxxxxx" value="xxxxxxx">  的内容 xxxxxxx=xxxxxxx。

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单中的按钮</title> <base target="_self"> </head> <body> <form> 账号:<input type="text"> <br> 密码:<input type="password"> <br> <br> <!--普通类型的按钮(以后结合js使用)--> <input type="button" value="普通" οnclick="alert(123)"> <br> <!--图片按钮--> <input type="image" src="web作业/实验题1/红楼梦书籍.jpg" value="图片按钮" width="100px" height="90px" οnclick="alert(123)"> <br> <!--清空按钮(作用:清空在输入框中输入的内容)--> <input type="reset" value="清空"> <br> <!--提交按钮--> <input type="submit" value="提交" οnclick="alert(123)"> <input type="hidden" name="cc" value="dd"> </form> </body> </html>

           

    转载请注明原文地址: https://ju.6miu.com/read-13789.html

    最新回复(0)