HTML中表单的各类按钮（新手）

来源：互联网发布：java Point类怎么用编辑：程序博客网时间：2024/05/21 07:46

表单中的各类按钮：

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

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

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

2.图片按钮（image）

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

3.清空按钮（reset）

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

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

4.提交按钮（submit）

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

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

5.隐藏域（hidden）

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

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

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

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

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

账号：<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="普通" onclick="alert(123)">            <br>            <!--图片按钮-->            <input type="image" src="web作业/实验题1/红楼梦书籍.jpg" value="图片按钮" width="100px" height="90px" onclick="alert(123)">            <br>            <!--清空按钮(作用：清空在输入框中输入的内容)-->            <input type="reset" value="清空">            <br>            <!--提交按钮-->            <input type="submit" value="提交" onclick="alert(123)">            <input type="hidden" name="cc" value="dd">        </form>    </body></html>

0 0