HTML基础复习(八)表单

表单-----<form>用于收集不同类型的用户输入

最常用的输入元素

  1、<input>,根据类型type属性可以设置不同的输入类型:

    type="text":文本域,文本域的缺省宽度是20个字符

    type="password":密码字段

    type="button":按钮

    type="radio":单选按钮

    type="checkbox":复选框

    type="submit":提交按钮

    type=“number”:数字输入框

    type=“range”:数字范围滑动条

  2、<select>,下拉选择框

    <select name="sex">

      <option value="boy">boy</option>

      <option value="girl">girl</option>

    </select>

  • 默认显示第一个option;要预设下拉框,在对应的标签<option>内添加属性selected即可
  • 属性multiple和size可设置多选,但还是尽量使用复选框

  3、<textarea>多行文本输入框

    <textarea rows="10" cols="30">

      我是一个文本框。

    </textarea>

  4、<label>为input元素标记

  • 当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上,优化鼠标点击事件易用性,它的for属性应当与相关元素的ID相同。
  • 它还可以在表单以外,但它仍然属于某一个表单,通过form属性指定它关联的表单

  5、<fieldset>将表单内的相关元素分组。

    <fieldset> 标签会在相关表单元素周围绘制边框。

    <legend>标签为fieldset元素定义标题

  6、<datalist>预先定义输入框input的可能选项

    <input list="browsers">

     <datalist id="browsers">

      <option value="Internet Explorer">

      <option value="Firefox">

      <option value="Chrome">

      <option value="Opera">

      <option value="Safari">

    </datalist>

时间: 2024-10-06 00:18:25

HTML基础复习(八)表单的相关文章

bootstrap基础学习【表单含按钮】(二)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bootstrap基础学习[表单](二)</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> </head> <body style="padd

Vue基础篇--7表单输入绑定input

Vue基础篇--7表单输入绑定input 1.基础语法 你可以用 v-model 指令在表单 . 及 `元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但v-model` 本质上不过是语法糖.它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理. 注意: v-model 会忽略所有表单元素的 value.checked.selected 特性的初始值而总是将 Vue 实例的数据作为数据来源.你应该通过 JavaScript 在组件的 data

Bootstrap基础学习(二)&mdash;表单

一.表单 1.基本格式 <!-- 基本格式 --> <form> <div class="form-group"> <label>姓名 </label> <input type="text" class="form-control" placeholder="请输入您的姓名"/> </div> <div class="form-

Html5之基础-9 HTML表单、其他控件、其他常用标记

一.表单概述 表单的作用 (1) 表单用于显示.收集信息,并提交信息到服务器 (2) 表单有两个基本部分 - 实现数据交互的可见的界面元素,比如文本框或按钮 - 提交后的表单处理 (3) 页面元素 - 使用 <form> 元素创建表单 - 在 <form> 元素中添加其他表单可以包含的控件元素 如图: 表单元素 <form> (1) 定义表单:使用成对的 <form></form>标记 (2) 主要属性 - action:  定义表单被提交时发生

基础的HTML表单

form(表单),它是页面与WEB服务器交互过程中最重要的信息来源,在网页中的作用不可小视.负责获取用户填写数据,并通过浏览器向服务器传送数据. 一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单的数据所用程序的URL以及数据提交到服务器的方法,表单名等. 语法:<form action="服务器程序URL(提交到给谁处理)" method=" get/post" enctype=" MIME信息" target="文档

Bootstrap基础(六):表单

Bootstrap 表单 在本章中,将学习如何使用 Bootstrap 创建表单.Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列出了创建基本表单的步骤: 向父 <form> 元素添加 role="form". 把标签和控件放在一个带有

[JavaWeb基础] 015.Struts2 表单验证框架

在web开发的过程中,我们经常要用到一些填写表单的操作,我们一般都要在提交表单信息的时候对表单的内容进行验证,struts2给我们提供了简单的实现接口,让我们可以很容易的对表单进行验证.下面讲解下最传统的方法配置表单验证框架,还有更简单明了的就是利用注解,这里就不解释了. 1.首先我们要在要进行配置的Action的同级目录下,新建一个.xml文件,命名格式为:ActionClassName-validation.xml. 例如我的Action类名为:RegisterAction   那么xml名

Django基础之Form表单验证

Form表单验证 1.创建Form类(本质就是正则表达式的集合) from django.forms import Form from django.forms import fields from django.forms import widgets from Mybbs.models import * import re class UserForm(Form): username = fields.CharField( required=True, error_messages={'re

前台html基础标签2表单、超链接 css四种样式 7.7

一.html-表单部分 1.按钮: <input type="button"> 2.文本框: <input type="text"> 3.密码: <input type="password"> 4.单选: <input type="radio" id="male" name="sex" checked="checked">

11-17网页基础--框架、表单

第三课时 一.框架 1.frameset [注意事项]在使用框架时,它的功能和<body>是并列的,不能跟<body>...</body>一起使用,所以<frame>...</frame>和<body>...</body>要分别放在不同的html文件中. 1)书写格式:<frameset rows="100,*" frameborder="no">  --rows指上下分