欢迎光临
我们一直在努力

HTML | 表单(四)按钮的使用

表单中的按钮往往是必不可少的存在,常用的按钮有三种。

  • type="button" 普通的按钮,需要配合JS实现功能
  • type="submit"提交按钮,点击后把数据提交到服务器
  • type="reset"重置按钮,把填写的表单恢复最初的状态

代码部分:

<td><input type="button">
    <input type="submit">
    <input type="reset"></td>

展示效果:

submit和reset属性具有默认value值,会展示出来默认的文字“提交”、“重置”。如果需要修改文字内容,或为button添加文字内容,可以通过value属性修改。

修改value后的代码:

<td><input type="button" value="别点我">
    <input type="submit" value="submit">
    <input type="reset" value="reset"></td>

展示效果:

我们还可以为按钮设置name属性,name属性可以方便我们后面更好的找到相应的内容。

添加name属性:

<td><input type="button" value="别点我" name="button">
    <input type="submit" value="submit" name="submit">
    <input type="reset" value="reset" name="seset"></td>

到目前为止所有代码:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>基础表单</title>
</head>
<body>
    <h1 align="center">注册信息</h1>
    <hr color="#336699">
    <form>
        <table width="600px" bgcolor="#f2f2f2" align="center">
            <tr>
                <td>姓名:</td>
                <td><input type="text" name="name" size="25" maxlength="6" placeholder="请输入你的名字" /></td>
            </tr>
            <tr>
                <td>邮箱:</td>
                <td><input type="text" name="email" size="25" maxlength="6" value="@163.com" /></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type="password" name="pwd" size="25" maxlength="6" placeholder="请输入你的密码" /></td>
            </tr>
            <tr>
                <td>确认密码:</td>
                <td><input type="password" name="pwd_conf" size="25" maxlength="6" placeholder="请再次输入你的密码"/></td>
            </tr>
            <tr>
                <td>上传头像:</td>
                <td><input type="file" name="file" /></td>
            </tr>
            <tr>
                <td>性别:</td>
                <td>男<input type="radio" name="sex" value="man"/>
                    女<input type="radio" name="sex" value="woman"/>
                    保密<input type="radio" name="sex" value="sex" checked/></td>
            </tr>
            <tr>
                <td>爱好:</td>
                <td>唱<input type="checkbox" name="dx1" value="sing"/>
                    跳<input type="checkbox" name="dx1" value="dance"/>
                    RAP<input type="checkbox" name="dx1" value="rap" checked/></td>
            </tr>
            <tr>
                <td><input type="button" value="别点我" name="button">
                    <input type="submit" value="submit" name="submit">
                    <input type="reset" value="reset" name="seset"></td>
                <td></td>
            </tr>
        </table>
    </form>
</body>

效果展示:

赞(0) 打赏
未经允许不得转载:散人研 » HTML | 表单(四)按钮的使用
分享到: 更多 (0)

评论 抢沙发

8 + 1 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏