2021-03-28

表单元素的认识与应用
表单效果如上，如何制作呢，我们一起来学习。
首先我们先来了解form元素，他是表单的祖先元素，意思是制作表单网页所有的代码都是它的后代元素
form的额外属性
method属性

<form action="#" method="POST">

method=post表示提交信息隐藏

 <form action="#" method="GET"

method=get表示提交信息展示
那什么是提交信息呢？就是下图地址栏可以隐藏与展示

其中action=#，把#改为你要提交信息的地址，就知道它的意思为提交地址属性，属性值为地址

<div>
            <label for="yonghu">用户名</label>
            <span>*</span>
            <input type="text" name="username" required id="yonghu">
            <small>请使用邮箱的电子邮件</small>
        </div>

然后实现单行文本输入框区域
label元素，行内元素，用于实现输入框前面文字部分
for属性的值为input的id属性的值，用于点击文字也能实现点击输入框效果

span元素就是实现小红心效果，行内元素，其中有小红心标注，说明表单必填框，这时就要加入required属性，如果未填写提交，浏览器会自动提示

input元素输入框的代码 type元素表示输入框里（text）输入样式 name元素代表上传到后台所属文件，如上图，这个用户名资料就会归类到username文件里面。后面我们会学到键值对，其中name就是它的键
后面几个输入框大同小异，只需要改变type属性的属性值，就是改变它的输入文本样式
密码框

 <input type="password" name="pwd">

手机号

<input type="text" maxlength="11"

maxlength元素表示最大输入文本个数

接下来是单选表单

radio实现单选框的样式
name属性相同才能2选一

  <div>
                        <input type="radio" name="mubiao" value="huiyuan" id="lianmeng"><label
                            for="lianmeng">渠道联盟</label>
                        <small>（成为我们合作伙伴）</small>
                    </div>
                    <div> <input type="radio" name="mubiao" value="huiyuan" id="new">
                        <label for="new">信息员</label>
                        <small>（采集发布热点农业信息）</small>
                    </div>

实现下拉样式

<label for="">所在地区</label>
            <span>*</span>
            <select name="country" id="">
                <option value="china" selected>中国</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>

select元素为父元素添加键（name）的属性值和下面是value的值
option为子元素，拉开即可展示
selected为option的属性，表示默认展示
提交按钮

<section>
             <button>同意以下条款并注册</button>   
            </section>

button为html5新增元素，代表提交按钮
多行文本框

```html
 <textarea name="" id="" cols="30" rows="10"></textarea>

cols表示它有多长，即行宽
rows表示高度，有多少列