美文网首页
关于表单

关于表单

作者: YangJeremy | 来源:发表于2018-03-05 10:17 被阅读0次

1. form 元素

常用属性:
action:提交表单的地址
method:提交表单使用的方法,一般有get和post两种

<form action="/getInfo" method="get">
</form>

2. input 元素

input 元素通过 type 属性来设置不同的input 类型。

2.1 文本域

<div class="username">
    <label for="username">姓名</label>
    <input id="username" type="text" name="username" placeholder="用户名">
</div>

其中 placeholder 属性可以设置在控件未获得焦点时显示的提示信息,而在获得焦点时提示消失。
2.2 密码域

<div class="password">
    <label for="password">密码</label>
    <input id="password" type="password" name="password" placeholder="请输入密码">
</div>

2.3 复选框

<div class="hobby">
    <label for="hobby">爱好</label>
    <input type="checkbox" name="hobby" value="dota">dota
    <input type="checkbox" name="hobby" value="travel">旅游
    <input type="checkbox" name="hobby" value="pet">宠物
</div>

name 属性为相同的复选框元素会被分到同一个分组。复选框的 value 值是必须有的,否则后台接收到数据无法识别究竟勾选了什么值。可以对 input 标签增加 checked 属性实现预选。

2.4 单选按钮

<div class="sex">
    <label>性别</label>
    <input type="radio" name="sex" value="male">男
    <input type="radio" name="sex" value="female">女
</div>

单选按钮和复选框一样,通过相同的name 属性值来识别同一组按钮,value 属性是必需的。可以对 input 标签增加 checked 属性实现预选。

2.5 下拉列表

<div class="section">
    <label for="car">我的car</label>
    <select id="car" name="car">
        <option value="TT">TT</option>
        <option value="SAAB" selected>萨博</option>
        <option value="GTR">GTR</option>
    </select>
</div>



option 的 value 属性是必需的,可以对 option 设置 selected 属性实现预选择。

2.6 提交按钮

<input type="submit" value="提交">

2.7 隐藏字段

<input type="hidden" name="country" value="Norway" />

隐藏字段对于用户是不可见的。

2.8 重置按钮

<input type="reset" />

重置按钮可以清空表单中填写的所有内容。

2.9 打开文件

<input type="file" name="pic" accept="image/gif" />

3. label 元素

<div class="username">
    <label for="username">姓名</label>
    <input id="username" type="text" name="username" placeholder="用户名">
</div>

label 元素为 input 元素定义标注,当鼠标选择该标签时,关联的元素控件会获得焦点,for 属性与关联元素的 id 属性要相同。

4. textarea 元素

<textarea name="criticism">ddd</textarea>

相关文章

  • HTML表单的用法

    1、关于form表单的基础 form表单:是一个包含表单元素的区域;作用,用于包裹表单元素。 表单元素:是允许用户...

  • 关于表单

    1. form 元素 常用属性:action:提交表单的地址method:提交表单使用的方法,一般有get和pos...

  • 关于表单

    一:(1)form可以将表单中的内容提交到服务器。(2)input的属性1、type=text输入类型是text,...

  • 关于表单

    1. 关于文件输入控件 使用文件输入控件可以浏览本地网络的一个文件,以上传到网站。比如下面这段代码 上传一个文件并...

  • 简述form表单

    关于form表单 表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数...

  • 记坑

    关于element表单问题如果同一组件内用了两个element表单,两个表单都有重置按钮,两个表单ref mode...

  • 关于HTML表单见解

    关于HTML表单见解 这是一篇简单的HTML表单from功能的编写 form标签 form标签是表单的外壳,for...

  • 第一个HTML表单

    引言 这篇文章可以给你关于以下内容的的体验: 创建一个表单发送表单数据 什么是HTML表单? 表单是用户与服务器或...

  • 《Flask Web开发实战》—— 表单

    Flask关于表单处理的部分,使用Flask-WTF库,首先安装 1. 表单的基本处理 Flask中表单的基本处理...

  • 关于表单控件

    label可以通过for这个属性和表单元素绑定 浏览器的兼容性:所有主流浏览器都支持for属性,但是Safari ...

网友评论

      本文标题:关于表单

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