• 欢迎访问极客公园网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入极客公园 QQ群
  • Git主题现已支持滚动公告栏功能,兼容其他浏览器,看到的就是咯,在后台最新消息那里用li标签添加即可。
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 百度口碑求点赞啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊http://koubei.baidu.com/s/gitcafe.net
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏极客公园吧

HTML表单及表单域【2019-5-13】

前端学习 laoking 6个月前 (05-13) 599次浏览 未收录 0个评论

1、表单标签

html 中一个完整的表单通常由 表单元素、提示信息、表单域(即多个表单的父容器)三部分组成。

(1)、imput 输入标签

  • <input/> 为单标签(自闭合标签)
  • type 是其基本属性,用来控制输入的类型

input 、br、hr 、img、 base 都是单标签

HTML表单及表单域【2019-5-13】
多个 radio 使用相同的 name ,则表示这是一组数据,这样可以实现单选效果。如果不加 name 多个 radio 可同时被选中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input标签</title>
</head>
<body>
    用户名:<input type="text" maxlength="15"/>
    <br/>

    <!--次数密码中间的空格使用了是全角输入法,全角输入法中,空格占一个汉字的大小-->
    密 码:<input type="password"/>
    <br/>

    <!--使用name 限定了一组内容,从而实现单选-->
    性 别:
    <input type="radio" name="sex" checked="checked"/><input type="radio" name="sex"/><br/>

    爱 好:
    <input type="checkbox" name="hobby"/> 看电影
    <input type="checkbox" name="hobby"/> 读书
    <br/>

    <input type="button" value="普通按钮"/>
    <br/>
    <input type="submit" value="提交按钮"/>
    <br/>
    <input type="reset" value="重置按钮"/>
    <br/>
    <input type="image" src="../image/imgButton.png"/>
    <br/>

    请选择文件:<input type="file"/>

</body>
</html>
HTML表单及表单域【2019-5-13】

(2)、label 标签(理解)

  • label 标签为 input 标签定义标注/标签
  • 用来绑定一个表单元素,当点击 label 标签的时候,被绑定的 表单元素就会获取焦点
  • 通过 for 属性,可以绑定 label 和 input ; 或者直接用lable 标签将input 包裹起来
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>label的使用</title>
</head>
<body>
    <!--label 中直接包裹 input,可以实现绑定-->
    <label>点击此处文本,用户名输入框会获取焦点 <br> 用户名:<input type="text"/></label>
    <br/>

    <hr/>
    <!--使用 label 的 for 属性绑定input-->
    <label for="#two">点击此处文本,密码输入框会获取焦点</label>
    <br/>
    用户名:<input type="text"/>
    <br/>
    密 码:<input type="text" id="#two"/>
</body>
</html>

(3)、textarea 文本域标签

  • <textarea></textarea>用来做大量文本的输入,支持多行
  • 有 cols 、rows 属性。cols 限制每行中所输入的文本字数,rows 限制最大行数。(这两个属性通常不被使用,更多使用会使用CSS样式做相关控制)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>textarea标签</title>
</head>
<body>
    请输入评论内容:
    <br/>
    <textarea ></textarea>
</body>
</html>

 

HTML表单及表单域【2019-5-13】

(4)、下拉菜单 <select></select>

  • <select></select> 用来定义下拉菜单
  • <option></option> 用来定义下拉菜单选项
  • <select></select> 中至少包含一对 <option></option>
  • 在 option 中定义了属性 selected=”selected” 之后,表示该项被默认选中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select标签</title>
</head>
<body>
    设置家乡
    <select >
        <option>选择省份</option>
        <option>山东</option>
        <option>内蒙古</option>
        <option>黑龙江</option>
        <option>山西</option>
    </select>
    <select>
        <option>济南</option>
        <option selected="selected">临沂</option>
        <option>聊城</option>
        <option>莱芜</option>
        <option>青岛</option>
    </select>
</body>
</html>

 

HTML表单及表单域【2019-5-13】

2、表单域 <form></form>

  • 该标签用来定义表单域,以实现用户信息的收集和传递,form 中的内容通常都会被提交到服务器。
  • 基本语法格式:
    <form action="url地址" method="提交方式" name="表单名称">
         ...各种表单控件...
     </form>
  • 常用属性有action、method、name
    • action : 指定接收并处理表单信息的服务器url地址
    • method : 表单数据的提交方式。分为 post / get
    • name : 指定表单名称,用来区分页面中的多个表单
  • 每个表单都应该有自己的表单域
  • 使用form 包裹之后点击提交按钮才有提交的动作
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单域</title>
</head>
<body>
    <!--使用 form 包裹之后,提交按钮和图片按钮点击时就有效果了-->
    <form action="https://www.baidu.com" method="post" name="userInfo">
        用户名:<input type="text" maxlength="15"/>
        <br/>

        <!--次数密码中间的空格使用了是全角输入法,全角输入法中,空格占一个汉字的大小-->
        密 码:<input type="password"/>
        <br/>

        <!--使用name 限定了一组内容,从而实现单选-->
        性 别:
        <input type="radio" name="sex" checked="checked"/><input type="radio" name="sex"/><br/>

        爱 好:
        <input type="checkbox" name="hobby"/> 看电影
        <input type="checkbox" name="hobby"/> 读书
        <br/>

        <input type="button" value="普通按钮"/>
        <br/>
        <input type="submit" value="提交按钮"/>
        <br/>
        <input type="reset" value="重置按钮"/>
        <br/>
        <input type="image" src="../image/imgButton.png"/>
        <br/>

        请选择文件:<input type="file"/>

    </form>
</body>
</html>

 

 


极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:HTML表单及表单域【2019-5-13】
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址