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

表单中的各类按钮:

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>





       

  • 6
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值