HTMl5表单认识

牢大1号

已于 2023-02-13 14:48:02 修改

阅读量47

点赞数

分类专栏： html5 基础新手文章标签： css 前端 html

于 2023-02-10 17:15:00 首次发布

本文链接：https://blog.csdn.net/m0_73524627/article/details/128963549

版权

html5 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

基础

8 篇文章 0 订阅

订阅专栏

新手

7 篇文章 0 订阅

订阅专栏

html5 表单

表单标签及表单属性

在HTML5中< form>标签用于为用户创建表单，以实现用户信息的收集和传递，其他标签要在他的标签下才可以使用

input标签的常用属性值

name属性：名称，也就是name的值代表当前input元素的名字；
value属性：默认值
1 当input type=“text”、“password”、"hidden"时，定义输入字段的初始值
2 当input type=“button”、“reset”、"submit"时，定义按钮上的显示的文本
3 当input type=“checkbox”、“radio”、"image"时，定义与输入关联的值
注意：input type="checkbox"和input type="radio"中必须设置value属性；value属性无法与input type="file"一通使用。
style属性：为input元素设定CSS样式；
width属性：当input type="image"时，通过width属性控制元素的宽度；
height属性：当input type="image"时，通过height属性控制元素的高度；
maxlength属性：定义input元素中可输入的最长字符数。

文本框

用于输入单行的文本信息
基本用法如下
<p>名字：<input type="text" name="firstName" size="30" maxlength="20"></p>
<p>姓氏：<input type="text" name="lastName" value="王"></p>
效果如下

名字：

姓氏：

（文本框在此页面无法正常显示）

单选按钮

如果不允许客户多选时，则可以使用表单元素的单选按钮
基本语法如下：
性别： <input type="radio" name="sex" value="男" checked/> 男
<input type="radio" name="sex" value="女" /> 女
效果展示：
性别：
男
女
（该页面无法正常显示）

密码框

在实际的表单登录或注册操做中，当输入密码时会使用黑色实心点或黑色星号来代替，从而对数据进行遮挡，这就是密码框基本语法如下：
<form>
<p>密码：<input type="password"></p>
</form>
效果如下：

密码：

（该页面无法正常显示）

复选框

复选框允许用户在一定数目的选项中选取一个或者多个
基本语法：
请选择你会的语言：
<p><input type="checkbox" name="language" value="Chinese" checked>中文</p>
<p><input type="checkbox" name="language" value="English" checked>英文</p>
<p><input type="checkbox" name="language" value="Japanese">日文</p>
<p><input type="checkbox" name="language" value="Español">西班牙语</p>

效果如下：
请选择你会的语言：

中文

英文

日文

西班牙语

（该页面无法正常显示）

按钮

在HTML5中按钮可以分为三种，分别是普通按钮，提交按钮，重置按钮
语法如下：
<p>名字：<input type="text" name="firstName"></p>
<p>姓氏：<input type="text" name="lastName"></p>
<p>密码：<input type="password"></p>

效果如下：

（该页面无法正常显示）

列表框select

<select name="名称">–定义一个下拉列表

<option value="选项的值”selected="selected">选项的显示内容</option><option value="选项的值">选项的显示内容</option></select> 使用selected="selected"默认选中