HTML基础知识（四）

最新推荐文章于 2024-08-20 10:31:33 发布

原创最新推荐文章于 2024-08-20 10:31:33 发布 · 212 阅读

0 ·

CC 4.0 BY-SA版权

自我学习专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了HTML表单的各种元素及其使用方法，包括文本框、密码框、单选按钮、复选框、按钮及下拉列表等，并通过实例说明了这些元素如何帮助收集用户输入。

文章目录

表单< form>

表单< form>

HTML表单用于收集不同类型的用户输入
表单是一个包含表单元素的区域
表单由窗口和控件组成
表单元素是允许用户在表单中输入内容，比如：文本域（TextArea）,下拉列表、单选框（radio buttons）、复选框（checkboxes）

在这里插入图片描述
举个例子，QQ邮箱这种登陆页面就是表单。
< input >是表单中最重要的表单元素。(input也是但标签自结束标签)

单行文本框

< input type=“text”>
还有value值可以设置默认值
在这里插入图片描述

密码框

< input type=“password”>
密码框的字段文字不会明文显示，以符号代替

在这里插入图片描述

单选按钮

< input type=“radio”>
可以用多个按钮的name设为一个，形成单选按钮组

男<input type="radio" value="man" checked name="sex">
女<input value="woman" name="sex" type="radio">

checked可以设置默认选择
在这里插入图片描述

复选框

< input type=“checkbox”>
也可以设置checked属性，通常复选框也需要设置name属性为同一个值
在这里插入图片描述

按钮

< input type=“button”>

<input type="button" value="注册">

在这里插入图片描述

提交按钮

< input type=“submit”>(提交到form中的action的地址，mehtod规定用于发送 form-data 的 HTTP 方法。)value可以设置按钮字体内容，也有默认文字。

下拉列表

<select name="one" id="1">      
          <option value="first">first</option>      
          <option value="second" selected="selected">second</option>      
          <option value="third">third</option>
</select>

在这里插入图片描述

文本区

< textarea rows=“10” cols=“30”>< /textarea>
rows属性控制行，cols控制列
在这里插入图片描述