html标签总结之表单标签

1、表单标签

  • input标签的常见属性
    • placeholder:设置提示信息 (placeholder n. 占位符)
    • checked:默认选择
    • disabled:不能选择
    • multiple:多选属性
    • for:用在lable标签中和主标签中的id相关联
    • selected:用在下拉菜单中
    • size:用在下来菜单中
  • 代码
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <h1>表单标签h1>
    <p>表单标签中的input用于搜集用户信息,根据不同的type属性值,展示不同的控件p>
    <form action="http://www.baidu.com">
        <h2>普通文本输入框h2>
        <input type="text" placeholder="输入你的姓名">
        <h2>密码输入框h2>
        <input type="password" placeholder="输入你的密码">
        <h2>复选框h2>
        <input type="checkbox" checked>辣椒
        <input type="checkbox">黄瓜
        <input type="checkbox" disabled>西红柿
        <h2>单选框h2>
        <p>单选框要实现二选一的功能,就要有属性name,且name为同一值p>
        <input type="radio" name="xb" checked><input type="radio" name="xb"><h2>提交按钮和重置按钮h2>
        <input type="submit">提交
        <input type="reset">重置
        <h2>多行文本框h2>
        <textarea cols="30" rows="2">textarea>
        <h2>下拉菜单:select,optionh2>
        <select>
            <option>北京option>
            <option selected>上海option>
            <option>天津option>
        select>
        <select size="2">
            <option disabled selected>请选择:option>
            <option>北京option>
            <option>上海option>
            <option>天津option>
        select>
        <select multiple>
            <option disabled selected>请选择:option>
            <option>北京option>
            <option>上海option>
            <option>天津option>
        select>
        <h2>label标签:h2>
        <p>label标签用来配合单选框使用,增大单选框的作用区域(以前选男女文字没效果,现在就会有效果)p>
        <input type="radio" name="x" id="man"><label for="man">label>
        <input type="radio" name="x" id="woman"><label for="woman">label>
    form>
body>
  • 结果展示
    html标签总结之表单标签_第1张图片

2、练习

  • 代码:
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单练习title>
    <base target="_blank">
head>
<body>
    <form>
        <table cellpadding="0">
            <tBody>
                <tr>
                    <td>电子邮箱:td>
                    <td><input type="text">td>
                tr>
                <tr>
                    <td>设置密码:td>
                    <td><input type="text">td>
                tr>
                <tr>
                    <td>真实姓名:td>
                    <td><input type="text">td>
                tr>
                <tr>
                    <td>性别:td>
                   <td><input type="radio" name="xb"><input type="radio" name="xb">td>
                tr>
                <tr>
                    <td>生日:td>
                    <td>
                        <select>
                            <option selected disabled>请选择option>
                            <option>1994option>
                            <option>1995option>
                            <option>1996option>
                            <option>1997option>
                            <option>1998option>
                        select><select>
                            <option selected disabled>--option>
                            <option>01option>
                            <option>02option>
                            <option>03option>
                            <option>04option>
                        select><select>
                            <option selected disabled>--option>
                            <option>01option>
                            <option>02option>
                        select>td>
                tr>
                <tr>
                    <td>td>
                    <td>
                        <a href="http://www.baidu.com" target="_blank">为什么要填写我的生日?a>
                    td>
                tr>
                <tr>
                    <td>我现在:td>
                    <td>
                        <select>
                            <option selected disabled>请选择身份option>
                            <option>学生option>
                            <option>老师option>
                        select>(非常重要)
                    td>
                tr>
                <tr>
                    <td>td>  
                    <td>
                        <img src="./验证码.jpeg" width="100" height="50">
                        <a href="http://www.baidu.com">看不清楚换一张?a>
                    td>
                tr>
                <tr>
                    <td>验证码:td>
                    <td>
                        <input type="text">
                    td>
                tr>
                <tr>
                    <td>td>
                    <td><input type="submit">td>
                tr>
            tBody>
        table>
    form>
body>
html>
  • 结果显示:
    html标签总结之表单标签_第2张图片

你可能感兴趣的:(web前端,html,前端,javascript)