3-3. input按钮

作者: 一Left一 | 来源:发表于2017-11-09 21:38 被阅读2次

1、<input type="button" value="我是按钮">
定义普通按钮,根据value值来指定按钮的显示内容
如果没有指定尺寸,会根据value的文字自动调整

2、<input type="image" src="images/register.jpg">
图片按钮, 设置type值后,根据src指定的图片来显示
在js中配合使用

3、<input type="reset">
重置按钮:清空和重置按钮同在form中其他表单元素的值
重置按钮显示的内容同样可以通过value来进行修改

4、<input type="submit">
提交按钮
将form中已经提交好的数据提交到服务器
在form标签中添加action属性,指定要提交到的服务器地址,也就是URL
要提交的元素必须要有name属性

5、<input type="hidden" name="cc" value="kukuku">
隐藏域
配合提交按钮的提交操作,偷偷提交一些其他的信息到服务器

</head>
<body>
<!--
作用,点击的时候,把form标签内收集的信息提交到服务器,如果input标签没有指定name属性就不会被提交
type="submit"
-->
<form action="">
    <!--手机号码: <input type="text" name="phone">-->
    <!--
    type="number"
    只输入数字,并且可以通过上下箭头进行修改
    -->
    手机号码: <input type="number" name="phone">
    <input type="submit">
    <!--
    button: 提供了一个按钮
    -->
    <input type="button" value="我是一个按钮">
    <input type="image" src="down.jpg">
    <input type="reset" value="重新输入">
    <input type="hidden" name="QQ" value="12435">
    <!--
    按钮输入:可以通过value指定显示的文字
      type="button": 结合js来执行操作
      type="image" 用图片来改变按钮的外观,默认执行提交操作
      type="reset" : 重置form表单标签内的所有输入标签,清空内容
      隐藏域: type="hidden", 在用户不能察觉的情况下收集一些信息
    -->
</form>
手机号码: <input type="number" name="phone">
</body>
图片.png

http://www.w3school.com.cn/tags/tag_input.asp
http://www.w3school.com.cn/html/html_forms.asp
http://www.w3school.com.cn/html/html_form_elements.asp
http://www.w3school.com.cn/html/html_form_input_types.asp
http://www.w3school.com.cn/html/html_form_attributes.asp

相关文章

  • 3-3. input按钮

    1、 定义普通按钮,根据value值来指定按钮的显示内容如果没有指定尺寸,会根据value的文字自动调整 2、 图...

  • 2020-03-17

    input按钮中的onclick事件 input按钮onclick事件大全

  • vue添加回车事件

    1.普通input版 2.如果按钮不是input的时候 如果按钮不是input,可以直接绑定在document上即...

  • js修改不了input的值

    奇怪的input 今天想做一个通过点击按钮,修改input值的控件,但是点击按钮后,input值变成修改的值后又变...

  • DOM节点

    1.在div后面添加一个通过input和button登录按钮: Input创建: 姓名: 账号: 密码: 按钮4 ...

  • 第四天

    1、Form:包裹标签,action:# Input:文本框,单选按钮,多选按钮。提交的按钮,按钮,重置的按钮。 ...

  • 上传文件 样式 自定义

    css input[type=file] 样式美化,input上传按钮美化 我们在做input文本上传的时候,ht...

  • 今天的我知识点

    button 按钮 input 文本域 border-radius:直角变圆角 去掉input的...

  • 按钮,图片,工具和响应式工具(css组件)

    #按钮 1 button 2 input type=button/submit/reset 3 a #按钮的七种样...

  • Enter提交表单

    表单回车提交 如果有提交按钮 button/input 的 type="submit” 时,默认 input 获焦...

网友评论

    本文标题:3-3. input按钮

    本文链接:https://www.haomeiwen.com/subject/ezhmmxtx.html