HTML表单详解-优快云博客

HTML-表单

一、HTM表单

HTML 表单用于搜集不同类型的用户输入，HTML 表单包含表单元素。

1.`<form>` 元素

HTML 表单用于收集用户输入。<form> 元素定义 HTML 表单：

<form>
 .
form elements
 .
</form>

2.`<form>` 元素属性

在这里插入图片描述

二、表单元素

1.`<input>` 元素

<input> 元素是最重要的表单元素。<input> 元素有很多形态，根据不同的 type 属性。
（1）元素属性：
在这里插入图片描述

1.1 text的常用type属性值

<input type="text"> 定义用于文本输入的单行输入字段：
（1）代码结构：

form action="">
    <div>学号：</div>
    <input type="text">
    <div>姓名：</div>
    <input type="text">
  </form>

（2）运行结果：
在这里插入图片描述

1.2.radio属性

<input type="radio"> 定义单选按钮。单选按钮允许用户在有限数量的选项中选择其中之一
（1）代码结构：

<form action="">
    <input type="radio" name="sex" value="male" checked>male
    <input type="radio" name="sex" value="female">famale
  </form>

name 用来控制是否为单选，如果想要实现单选，必须保证多个input中的name值相等
value 为 input 元素设定值，对于不同的输入类型，value 属性的用法也不同：

	    type="button", "reset", "submit" - 定义按钮上的显示的文本
	    type="text", "password", "hidden" - 定义输入字段的初始值
	    type="checkbox", "radio", "image" - 定义与输入相关联的值

checked用来设定默认值
（2）运行结果：
在这里插入图片描述

1.3.submit属性

<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。表单处理程序在表单的 action 属性中指定。
（1）代码结构：

<form action="">
    <div>学号</div>
    <input type="text" value="000">
    <div>姓名</div>
    <input type="text" value="xxx">
    <br>
    <input type="submit" value="submit">
  </form>

（2）运行结果：
在这里插入图片描述

1.4.checkbox属性

该属性用来实现多选框的功能
（1）代码结构：

<form action="">
    <div>爱好：</div>
    <input type="checkbox" name="hobby" >篮球
    <input type="checkbox" name="hobby" >足球
    <input type="checkbox" name="hobby" >羽毛球
  </form>

（2）运行结果：
在这里插入图片描述

2.`<select>` 元素（下拉列表）

（1）代码结构：

<form action="">
    <span>所在城市：</span>
    <select>
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="杭州">杭州</option>
    </select>
  </form>

（2）运行结果：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210310133422639.png

3.`<textarea>` 元素

<textarea> 元素定义多行输入字段（文本域）：
（1）代码结构：

<form action="">
    <textarea name="message" id="" cols="30" rows="10">
      表单元素textarea
    </textarea>
  </form>

（2）运行结果：
在这里插入图片描述

4.lable标签

lable标签用于绑定一个表单元素，当点击lable标签的文本时，浏览器就会自动将焦点转到对应的表单元素上，来增加用户体验
（1）代码结构：

<form action="">
    <div>爱好：</div>
    <input type="checkbox" name="hobby" id="basketball"><label for="basketball">篮球</label>
    <input type="checkbox" name="hobby" id="football"><label for="football">足球</label>
    <input type="checkbox" name="hobby" id="badminton"><label for="badminton">羽毛球</label>
  </form>