HTML表单

HTML表单

表单的是一个允许用户输入信息的元素,用于上传到服务器

form标签

    <form action="demo.html" method="GET">
        <div class="username">
            <input type="text" name="username">
        </div>
        <div class="password">
            <input type="password" name="password">
        </div>
        <div class="submit">
            <input type="submit" velue="提交">
        </div>
    </form>

所有input都需要用form包裹住,如果不用form标签包裹住页面就无从得知要长传到哪里了;

action属性

这个属性非常重要是用于指定表单的提交地址

method属性

这个属性有get、post两个值,这两个值代表了两种提交方式。

  • get
    用这种提交方式会把用户输入的数据拼装成url传输给服务器
    什么时候会用到get,我们需要向后索要数据时得先发送请求提示这个时候可以使用get
    适合用于短小信息和对安全性要求较低数据
  • post
    直接把数据传输给服务器
    适合传输较长或需要安全性较高的信息

enctype

  • application/x-www-form-urlencoded:在发送钱编码所有字符(默认值)
  • tex/planin:空格转换为"+",但不对特殊字符编码
  • multipart/form-data:使用包含文件上传控件的表单时必须添加该值

target属性

这个属性是用于设定在何处打开action的,用的很少

input标签

type属性

  • text 设定一个可输入的文本框,添加placeholader可以设定一个提示
  • password 把输入的字符显示成原点,用于密码输入,添加placeholader可以设定一个提示
  • checkbox 设定一个多选框 name得设定成一样的,velue得设置需要长传的值
  • rodio 设定一个单选框 velue一样要设定好值,如果是用于一组判断必须把name设定成相同
  • file 文件上传,可以使用accept="文件类型"添加上传类型限制
  • submit 设定一个提交按钮 这个值的value就是他显示的名称
  • hidden 设定一个看不见的隐藏域,可以用于暂存一些东西。还有一个作用就是为了安全性。我们可以用hidden设定一个值用于服务器校验
  • button设定一个按钮,但这个按钮并不自带提交属性
  • reset 设定一个清空按钮,用于清空其它输入框内的数据

select下拉菜单

    <select name="" id="">
        <option value="1">1</option>
        <option value="2" selected>2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>

如果我们需要是他默认选中某个选项可以添加selected属性

textarea设定一个可拖动的输入框

<textarea></textarea>

我们可以通过css来调整他的宽高和是否可拖动

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • <input>标签 标签用于搜集用户信息,根据不同的type属性值,输入字段拥有很多种形式。输入字段可以是文本字段...
    _空空阅读 4,078评论 0 3
  • 一、表单 1. 表单的作用 HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户...
    zx9426阅读 447评论 0 1
  • HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互。 表单...
    饥人谷_Dylan阅读 652评论 0 48
  • 参考链接:JAVA修饰符类型(public,protected,private,friendly)的通易解释 Ja...
    plusend阅读 213评论 0 0