通过案例来了解响应式开发HTML5CSS3表单的功能方法

目录

一、前言

二、form标签

1.知识点

2.案例

2.1代码部分

2.2运行截图

三、input标签

1.知识点

2.案例

2.1代码部分

2.2运行截图

四、lable标签

1.知识点

2.案例

2.1代码部分

2.2运行截图

五、select标签

1.知识点

2.案例

2.1代码部分

2.2运行截图

六、fieldset标签

1.知识点

2.案例

2.1代码部分

2.2运行截图

七、datalist标签

1.知识点

2.案例

2.1代码部分

2.2运行截图


一、前言

1.本文讲解的响应式开发技术(HTML5+CSS3+Bootstrap)的HTML5表单等功能方法的代码,这也是很多教材的一个典型案例;

2.本文将讲解涉及到HTML5表单等功能方法的知识点,其它方面会大致讲一下;

3.本代码是使用visual Studio Code编写的,其他软件如DW,HBX等都是可以的;

4.运行浏览器是谷歌,同时推荐使用谷歌浏览器;

5.这个案例是我上学跟老师所讲做出来的,有些地方不是很完美,请见谅也请多赐教;


提示:以下是本篇文章正文内容,下面案例可供参考

二、form标签

1.知识点

<form>标签是创建表单的,语法如下:

<form action="UPL" 地址   "method="提交方式“    name=”表单名称

enctype="multipart/form-data">

控件
</form>

form标签参数说明
参数说明
name区分网页中多表单的
action用于指定接收并处理表单数据的服务器URL地址
enctype以编码格式发送表单数据
method用于设置表单数据的提交方式,取值可以get或post,默认为 get

2.案例

2.1代码部分

代码如下(示例): 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>form标签_表单</title>
</head>
<body>
<form method="post" name="这是一个案例" >
    <input name="anli" /><br>
    <button>提交</button>
</form>
</body>
</html>

2.2运行截图

显示结果如下(示例): 

三、input标签

1.知识点

<input>标签语法格式如下:

<input type="控件类型” />

input标签的部分属性
参数参数说明
text单行文本输入框
password密码输入框
checkbox复选框
radio单选框
submit提交按钮
reset重置按钮
button普通按钮提交按钮
image图像提交按钮

2.案例

2.1代码部分

代码如下(示例): 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>input标签案例</title>
</head>
<body>
  <form method="post">

     <label>
      用户名:
    </label>
     <input class="right" type="text" value="请输入姓名" maxlength="6"><br/><br/>
     <label>
      密&nbsp;&nbsp;码 :
    </label>
    <input class="right" type="password">
  </form>
</body>
</html>

2.2运行截图

显示结果如下(示例): 

四、lable标签

1.知识点

<lable>标签用于<input>标记使用的,当选择该标签时,浏览器会自动将焦点转移到这个控件

2.案例

2.1代码部分

代码如下(示例): 

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>label标签的案例</title>
</head>

<body>
  性别:
  <label for="nan">男</label>
  <input type="radio" name="sex"/>
  <label for="nv">女</label>
  <input type="radio" name="sex"/>
</body>
</html>

2.2运行截图

显示结果如下(示例): 

五、select标签

1.知识点

<select>标签是多选单选菜单,语法如下:

<select>
<option value="1">选项一</option>

<option value="2">选项二</option>
</select>

select标签参数说明
参数说明
size下拉菜单的可见选项数
multiple具有多项选择的功能,按住ctrl可选择多项
selected当前项即为默认选中项

2.案例

2.1代码部分

代码如下(示例): 

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>select标签的案例</title>
</head>

<body>
  性别(单选):<br />
  <select>
    <option>请选择</option>
    <option selected="selected">男</option>
    <option>女</option>
  </select><br /><br />
  民族(多选):<br />
  <select multiple="multiple" size="5">
    <option>请选择</option>
    <option>汉族</option>
    <option>回族</option>
    <option>满族</option>
    <option>壮族</option>
    <option>苗族</option>
    <option>藏族</option>
  </select>
</body>
</html>

2.2运行截图

显示结果如下(示例): 

六、fieldset标签

1.知识点

<fieldset>标签语法格式如下:

就是通过一个带有边框样式的线条将表单中包裹起来

使用<legend>标签定义分组的标题

2.案例

2.1代码部分

代码如下(示例): 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fieldset标签案例</title>
</head>
<body>
    <form action="">
        <fieldset>
            <legend>学生信息表</legend>
            姓名:<input type="text" name="name"><br>
            学号:<input type="text" name="studentage"
        </fieldset>
    </form>
</body>
</html>

2.2运行截图

显示结果如下(示例): 

七、datalist标签

1.知识点

<datalis>用于选项列表,通过id 属性与<input>标签关联,通过嵌套<option>标签来创建

2.案例

2.1代码部分

代码如下(示例): 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>datalist标签案例</title>
</head>
<body>
  <input id="datalist" list="shuru">
  <datalist id="shuru">
    <option value="这是一个案例"></option>
    <option value="欢迎观看"></option>
    <option value="祝您学有所得!"></option>
  </datalist>
</body>
</html>

2.2运行截图

显示结果如下(示例): 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

姜鸿阳

谢谢您!感谢您的支持!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值