html学习笔记表单<form>

<label for="username">用户名:</label>//控件id名称
      <input type="text"  name="username" id="username" value="" />

其中,<label>标签的for属性用来是点击文字光标对应相应id的控件。label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该 label标签相关连的表单控件上)。

当用户需要在表单中输入大段文字时,需要用到文本输入域。

<textarea cols="50" rows="50">在这里输入内容...</textarea>

<input>标签中单选框radio的name值一定相同,多选框类型为checkbox。其中checked="checked"表示默认选中。

<form action="save.php" method="post" >
    <label>性别:</label>
    <label>男</label>
    <input type="radio" value="1"  name="gender-man" checked="checked" />
    <label>女</label>
    <input type="radio" value="2"  name="gender-man" />
</form>

下拉框使用<select><option></option></select>标签,其中value中的值是表单提交的值,外面的值为显示的值。

<select>
      <option value="看书">看书</option>
      <option value="旅游" selected="selected">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>

下拉列表也可以进行多选操作,在<select>标签中设置multiple="multiple"属性,就可以实现多选功能,在 widows 操作系统下,进行多选时按下Ctrl键+单击

<select multiple="multiple">
      <option value="看书">看书</option>
      <option value="旅游" >旅游</option>
      <option value="运动"  >运动</option>
      <option value="购物" >购物</option>
    </select>

当用户需要提交表单信息到服务器时,需要用到提交按钮。类型为submit,提交到action行为中。当用户需要重置表单信息到初始时的状态时,重置类型为reset。

同时进行

时间: 2024-10-05 04:31:13

html学习笔记表单<form>的相关文章

[html5] 学习笔记-表单新增的元素与属性(续)

本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indeterminate属性.Image提交按钮的宽高属性. 1.controls属性 在html5中,可以在标签内部放置一个表单元素,并且通过该标签的controls属性来访问该表单元素. 1 <body> 2 <script> 3 function setValue(){ 4 var label

[html5] 学习笔记-表单新增元素与属性

本节讲的是表单元素的form,formaction属性,frommethod,formenctype属性,formtarget,autofocus属性,required,labels属性. 1.form属性 在html4中,表单内的从属元素必须书写在表单内部,而在html5中,可以把他们书写在页面上任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以指定该元素从属于指定表单了. 以往的写法: 1 <body> 2 <form id="testform&q

HTML5 学习笔记 表单属性

HTML5新的表单属性 HTML5 的form和input 标签添加了几个新的属性 <form>新属性 autocomplete novalidate input 新属性 autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height and width list min and max multiple pattern (regexp) placeholder req

ZendFramework2学习笔记 表单过滤、表单验证

ZF2有很多内建的Filter和Validator组件,可以方便地对表单数据进行处理. Filter的作用是过滤表单数据,例如,去除一些空格,替换一些敏感词等. Validator的作用是检验表单数据是否合规,如果不合规,则提供不合规原因的文本消息. 假设有这样一个Form: 表单数据存储到数据库之前的要求是: 用户名:过滤左右空格,字符都转换为小写,只能是由数字和字母字符组成,长度限制,数据库必须不存在该用户名. 密码:密码1和密码2必须相同,长度限制. 邮箱:必须符合密码格式,加密存储,长度

django book学习笔记——表单

1.从Request对象中获取数据 每个view函数的第一个参数是一个HttpRequest对象,在view函数的执行过程中,你可以用这些属性来获取当前request的一些信息(比如,你正在加载这个页面的用户是谁,或者用的是什么浏览器). HttpRequest对象包含当前请求URL的一些信息: 属性/方法                 说明                                 举例 request.path       除域名以外的请求路径,以正斜杠开头 "/he

html5晋级之路-学习笔记表单

HTML表单 1.获取不同类型用户的输入 2.常用标签 <form>                              单表  (比如说用户名:密码:) <input>                             输入域 <textarea>                        文本域 <label>                             控制标签 <fieldset>              

Jquery学习笔记-表单元素选择器

1. :input表单选择器可以实现,它的功能是返回全部的表单元素,不仅包括所有<input>标记的表单元素,而且还包括<textarea>.<select> 和 <button>标记的表单元素,因此,它选择的表单元素是最广的. $("#frmTest :input")表单选择器代码获取了表单中的全部元素 2. :text表单文本选择器可以获取表单中全部单行的文本输入框元素,单行的文本输入框就像一个不换行的字条工具,使用非常广泛. 通过:

HTML表单(Form)

HTML表单(Form)是HTML的一个重要部分,主要用于采集和提交用户输入的信息. 举个简单的例子,一个让用户输入姓名的HTML表单(Form).示例代码如下: <form action="http://www.admin5.com/html/asdocs/html_tutorials/yourname.asp" method="get"> 请输入你的姓名: <input type="text" name="your

HTML学习笔记 域元素(form表单、textarea文本域、fieldset域集合、input使用) 案例 第四节 (原创)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <!--form表单--> <form> 用户名: <!--文本域--> <input type="text">