HTML form表单标签

form 表单标签

         form是表单标签元素的容器

         <input   type="text">     文本输入框；

         <input   type="password">     密码框；

         <input   type="radio">     单选框；

         <input   type="checkbox">    多选框；

         <input   type="submit">    提交按钮；

         <input   type="reset">    重置按钮；

         <input   type="button">    普通按钮；

         <input   type="file">       提交文件；

---

         <input   type="radio">     单选框；如果选择其中一个，必须要给一个相同的 name 值！

         如：    性别：男<input type="radio" name="sex"> 女<input type="radio" name="sex">

         name  表单元素的属性，需要通过submit按钮提交的元素 必须要有 name 值！       

         name  : 代表提交的属性是什么属性。

         value ：代表提交的属性值是什么。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单标签form练习</title>
    <style>
        form {
            width: 700px;
            font-size: 30px;
            margin: 0 auto;
        }
        select{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <form action="">
        姓名：<input type="text" name="name">  <br>    <!-- 文本输入框 -->
        密码：<input type="password" name="password"><br>    <!--密码框-->
        性别：男<input type="radio" name="sex" value="man"> 女<input type="radio" name="sex" value="women"><br>   <!--单选框-->
              <!-- 单选框如果要选择其中的一个时，必须要给它们一个相同的name值，让他们产生互斥！ -->
        年龄：<input type="text" name="age"><br>
        爱好：唱歌<input type="checkbox" name="hobby" value="唱歌"> 画画<input type="checkbox" name="hobby" value="画画"> 看书<input type="checkbox" name="hobby" value="看书"><br>   <!--多选框-->
    </form>
</body>
</html>

       input ： focus{

                    boder:  2px  solid   red;

       }

       在style中写，当鼠标获得焦点时，所展现的效果！

---

二、下拉菜单   select

       格式：   

市  <select name="city" id="" size="2">
            <option value="1">郑州</option>
            <option value="2">三门峡</option>
            <option value="3">商丘</option>
            <option value="4">合肥</option>
            <option value="5">南京</option>
    </select>

       name  : 代表提交的属性是什么属性；   option  ： 是下拉菜单的选项；       value：提交时对应option的值；

       size： 可以将下拉菜单设置成滑动的选项，size等于几，就可以展示几个选项。

select  下拉菜单

---

三、文本域

       <textarea   name=" "   cols=" "   rows=" " > ...</textarea>

       cols ： 代表列；    rows  ： 代表行；

       例子：

留言：<textarea name="message" id="" cols="30" rows="10"></textarea>

    浏览器解析出来为：

textarea 文本域

    重点  如果样式不对可以在style设置一下样式：

               textarea  ｛

                                vertical-align：top；    

              ｝

 

---

四、fieldest   自定义控件组       

<fieldset>
       <legend>体检报告</legend>
       身高：<input type="text"> <br>
       体重：<input type="text"><br>
       视力：<input type="text"><br>
       报告:<textarea name="" id="" cols="30" rows="10"></textarea>
</fieldset>

fieldest  自定义控件组

    1. fieldset  标签将表单内容一部分打包，生成一组相关表单的字段；2.当一组表单元素放到 <fieldset></fieldset>标签内时，浏览器会以线框来显示它们；3.<legend></legend>标签为fieldset 元素定义的标题

---

---

作业：代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人信息</title>
    <style>
        div {
            width: 700px;
            margin: 0 auto;
            border: 1px solid #3e2f32;
        }
        h1 {
            text-align: center;
        }
        form {
            margin: 0 30px 50px;
        }
        textarea {
            vertical-align: top;
            width: 550px;
        }
    </style>
</head>
<body>
    <div>
        <h1>个人信息</h1>
        <form action="">
            姓名：<input type="text"><br><br>
            年龄：<input type="text"> <br><br>
            照片：<input type="file"> <br><br>
            <fieldset>
                <legend>身体特征</legend>
                身高：<input type="text">&nbsp;cm <br><br>
                体重：<input type="text">&nbsp;kg <br>
            </fieldset>
            <br><br>
            性别：<label><input type="radio" name="sex" value="man">男</label>
                <label><input type="radio" name="sex" value="women">女</label>
                <br><br>
            爱好：<label><input type="checkbox" name="hobby" value="sing">唱</label>
                  <label><input type="checkbox" name="hobby" value="jump">跳</label>
                  <label><input type="checkbox" name="hobby" value="rap">rap</label>
                  <br><br>
            出生地：<select name="birthplace" id="">
                    <option value="1">商丘</option>
                    <option value="2">郑州</option>
                    <option value="3">洛阳</option>
                    <option value="4">卢氏</option>
                    <option value="5">三门峡</option>
                    <option value="6">周口</option>
            </select>
            <br><br>
            自我评价：<textarea name="evaluate" id="" cols="30" rows="5"></textarea>
            <br><br>
            <input type="submit">
        </form>
    </div>
</body>
</html>