HTML5(3)

本文介绍了HTML5中的结构元素如<header>,<section>,和<footer>,并详细讲解了表单的创建和应用场景,包括不同类型的input元素如text,password,radio,checkbox以及表单验证特性如placeholder和required。同时,提到了表单元素的交互增强,如label的使用提高可用性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

HTML5结构元素

一、常见的一般页面布局分析:

页面头部、页面主体、页面底部

二、HTML5的结构元素的代码实现

页面头部:header

页面主体:section

页面底部:footer

表单应用/语法/属性

一、表单

1.表单定义(以开发的角度):多个输入框及按钮等元素以表格形式展示

2.表单的应用场景:最常见的是网站页面中的登录或是注册功能

3.表单的代码结构:

<form>

     <table border="1px" solid black">

            <tr>  <td colspan="2">xx</td>  </tr>

            <tr>  <td>xx</td><td><input type="text"/></td>  </tr>

            <tr>  <td>xx</td><td><input type="password"/></td>  </tr>

            <tr>  <td colspan="2"> 

                     <input type="submit" value="xx"/><input type="reset" value="xx"/>  </td>  </tr>

     </table>

4.表单的展现形式

5.表单元素属性

<imput type="text" name=""  value=""/>

type:指定当前元素的类型

value:所见即所得,默认初始化可看到的

name:提交到后端服务器的值的key  

6.文本框

<input type="text"  value="123"/>

特点:

(1)用户输入的值在页面中明文显示

(2)value=""     默认的值

7.密码框

<input type="password"/>

特点:type="password" 用户输入的值在页面中暗文显示

8.单选框

<input type="radio"  name""  value=""/>

特点:

(1)type="radio"代表是单选按钮

(2)name="xx"代表两个单选按钮如果保持一致的话,代表是单选,否则是多选

(3)value="xx"代表发送到后端服务器中的值,而不是展示

(4)checked代表初始化页面的时候默认勾选某个单选框,等价于checked=checked

9.复选框

<input type="checkbox"  name=""  value=""  checked="checked"/>

特点

(1)type="checkbox"代表是多选按钮

(2)name="xx"注意点:多个多选按钮需要保持name的值保持一致

(3)value="xx"代表发送到后端服务器中的值,而不是展示

(4)checked代表初始化页面的时候默认勾选某个人多选框,等价于checked=checked

10.列表框

<select>  <option value=""></option>  </select>

11.图片按钮

(1)reset

<input type="reset"  name="butReset"  value="重置"/>

定义:重置

(2)submit

<input type="submit"  name="butSubmit"  value="提交"/>

定义:提交

特点:

<1>form中action存放了demo009.html页面的全路径

<2>type="submit"触发了当前表单,并跳转到action中的页面

(3)button

定义:普通按钮

<input type="button"  name="butButton"  value="登录"/>

12.多行文本域

<textarea>文本内容</textrea>

13.文件域

<form action="" method="post" enctype="multipart/form-data">  

     <p><input type="file" name="files" />  

           <input type="submit" name="upload" value="上传" /></p>

</form>

14.邮箱

<p>邮箱:<input type="email"  name="email"/></p>

<input type="submit"/>

15.网址

<p>请输入你的网址:<input type="url"  name="userUrl"/></p>

<input type="submit"/>

特点:type="url"代表提交表单后,网址必须符合规范,否则会提示“请输入网址”

16.数字

<p>请输入数字:<input type="number"  name="num" min="0" max="100" step="10"/></p>

<input type="submit"/>

特点:

(1)type="number"代表的含义是展示可以限制用户输入数值范围的标签类型

(2)min代表范围的最小值

(3)max代表范围的最大值

(4)step代表用户每一次选择数值之间的步长

17.滑块

<p>请输入数字:<input type="range"  name="range1" min="0" max="10" step="2"/></p>

<input type="submit"/>

18.搜索

<p>请输入搜索的关键词:<input type="search"  name="sousuo"/></p>

<input type="submit"/>

特点:type="search"代表的含义是带有删除按钮的搜索框(删除按钮在搜索框范围之内)

表单的高级运用

1.隐藏域

<input type="hidden" value="666" name="userid">

typq="hidden"代表当前记录不需要展现在当前行上,但是需要隐藏起来并发送给后端服务器

2.只读和应用

<input name="name" type="text" value="张三"  readonly>

<input type="submit "  disabled   value="保存" >

特点:

(1)readonly代表不可编辑

(2)disabled代表置灰效果且不可编辑

3.表单元素的标注

请选择性别:    

<label for="male">男</label>    

<input type="radio" name="gender" id="male"/>    

<label for="female">女</label>    

<input type="radio" name="gender" id="female"/>

特点:

(1)在input标签中加入id="xx"

(2)在label标签中加入for="xx"

(3)增加鼠标的可用性

(4)自动将焦点转移到该标注相关的表单元素上

表单的初级验证

1.表单的初级验证缘由

(1)减轻服务器压力

(2)安全性

2.表单的初级验证元素标签

(1)placeholder

(2)required

3.placeholder

<input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>

特点:

(1)input类型的文本框提供一种提示

(2)可以描述文本框期待用户输入何种内容

(3)提示语默认显示,当文本框中输入内容时提示语消失

(4)适合于input标签:text、search、url、email和password等类型

Value框,输入内容时原有的文字不会消失

4.required

<input type="text" name="username"  required/>

<input type="submit" value="提交" />

特点:

(1)规定文本框填写内容不能为空,否则不允许用户提交表单

(2)适合于input标签:text、search、url、email、password、number、checkbox、radio、file等类型

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值