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

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>

 

 

原创文章,作者:老K,如若转载,请注明出处:http://www.laoking.net/zixue/qianduan/201913688.html

联系我们

400-800-8888

在线咨询:点击这里给我发消息

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息