HTML-05表单标签

总览

表单域

1.理解：<form></form>标签相当于表单中的整体标签，建构了一个大框架。是一个包含表单元素的区域。
2.作用：将表单元素的结果传递给服务器
3.form标签里面的属性：

属性【属性值】	描述
action【url地址】	接收表单域处理结果的服务器地址
method【get/post】	设置表单的提交方式
name【名称】	指定表单的名称，区分同一网页中的多个表单域

4.示例

<form action="demo.php" methon="post" name="one">
</form><!--php格式为一种网页脚本程序-->

提示信息

1.注释：用于提示用户输入
2.示例：

<form action="demo.php" methon="post" name="one">
     用户名：
</form>

表单控件

1.理解：用户用于填写信息时点击的按钮或方框。允许用户在表单中输入或选择的内容控件。

2.1 input输入表单元素

示例：

<form action="demo.php" methon="post" name="one">
    用户名：<input type="" name=""/>
</form>

type属性

• 文本框（text)
• 密码框（password）
• 单选按钮（radio）
• 复选框（checkbox）
• 提交按钮（submit)
  注释：提交指的是将表单的结果提交给服务器，提交按钮上的名称可通过value属性改变
• 重置按钮（reset）
  注释：重置指用户清空自己在表单中填写的信息。
• 普通按钮（button）
  注释：普通按钮是一种可以点击的按钮，不发送数据，通常用于点击以获取验证码
• 文件域（file）
  文件域则是用于上传文件，如图像文件等。
• 补充：随着HTML5的出现，另新增了color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week共13个type类型，此处暂不做详细解释

value属性：可以显示在输入框中且传递给后台对应表单元素对应的数据

name属性：标注表单元素的名字，在单选按钮中若要实现多选一的效果或者实现复选框的效果，则需保证name相同

• 示例：

<form action="demo.php" methon="post" name="one">
    用户名：<input type="text" name="name"/><br/>
    性别：男<input type="radio" name="gender" value="男"/> 女<input type="radio" name="gender" value="女"/>
</form>

checked属性：在单选按钮和复选框中设置，用于设置默认勾选的选项，但用户可以更
改。用法是直接在对应选项的<input/>标签中添加checked。

maxlength属性：用户输入的最长字符

2.2select下拉表单元素

• 整体标签：<select></select>
• 整体标签内的小标签【两者为嵌套关系】：<option></option>
• 若想设置默认值，则在<option></option>中加属性selected
• 示例

<form action="demo.php" methon="post" name="one">
    来自省份<select>
                   <option>湖北</option>
                   <option>湖南</option>
                   <option>山东</option>
                   <option selected="selected">山西</option>
           </select>
   </form>

2.3textarea文本域元素

• 理解：当用户输入字数很多时，超出文本框的限制
• 整体标签：<textarea> </textarea>
• 整体标签对应的属性：cols=“每行中的字符数” rows=”显示的行数“
• 示例

<form action="demo.php" methon="post" name="one">
    对于今天学习您的反馈小结
    <textarea cols="20" rows="3">
        请您输入您的反馈小结<!--给用户看的提示内容-->
    </textarea>
</form>

2.4 label标签【补充】

理解：<label><label/>标签用于绑定表单元素，当用户指向标签内指定的文字时，光标会自动跳转到指定的表单元素，优化了用户体验感
示例：

<form action="demo.php" methon="post" name="one">
      性别:<label for="male">男</label><input type="radio" name="gender" value="男" id="male"/> 
          <label for="female">女</label><input type="radio" name="gender" value="女" id="female"/>
</form>