如何创建XHTML表单

首先奉上本菜曾经的作业——一张模仿智联招聘中的注册表单。虽然没有加样式显得很难看,但表单的基本要素已经具备了。

接下来进入正文,开始介绍各表单元素

form标签:

在创建表单时,第一步就是form标签。之后在form里添加各种你想要的表单元素。虽说不用form一样可以创建一个可以看的表单,但之后涉及到提交数据时就必须要用到form了。

method为提前方式,有get和post两种,相比之下post更安全可靠,因为get方式会将用户填写的信息附在访问地址之后,具体原因之后的博文会更详细的阐述。

文本输入框:

其中:type为设置类型,placeholder为设置提示信息,size设置长度(也可用css对其样式进行更细致的修改)。

效果:

密码输入框:

与文本输入框类似,只不过type类型变成password,区别在于当在密码输入框中输入时,输入内容将被隐藏。

效果:

单选框:

单选框输入类型为radio,这里input标签用label标签包起来了,这是为了给后面加上“男”“女”等字样。要想让两个单选框一次只能选中一个,需要让两个input标签里的name属性一致,checked属性是设置其所在的单选框为默认选中。

效果:

复选框:

复选框类型为checkbox,这里用lable标签包起来同样是为了在之后加上字样。checked属性同上。

效果:

下拉框:

这里和之前不同了,不再使用input标签,而是select标签下包裹了option标签,在option标签里填写可选的内容,设置value属性是为了之后具体操作数据,这里先不做解释。

效果:

多行文本输入框:

textarea标签,可以通过行数rows,列数cols来设置宽高,也可以用css对样式进行更细致的更改。

效果:

按钮:

三种不同的按钮属性

也可以写为:

在button中添加onclick属性之后调用javascript函数来操作网页,这个我们之后再聊。

注:作为一个前端学习者,按钮应该是我们需要重视的对象。浏览器自带的按钮样式并不好看,如何做出更好看,更炫酷的按钮之后的博文我会和大家一起分享。

一个提升用户体验的小技巧:

许多用户在注册时我相信都是有些急躁的心理(怎么这么多要填的!!),我们希望用户在点击左边诸如“用户名”,“密码”之类的文字时也能激活右边相应的控件。

做法如下:

给左边的文字标签加一for属性,让for属性中的值与右边输入控件的id值一致即可。这样就可以让用户在匆忙中不至于因为点击失误增加多余的恼火:)

感谢您的浏览,希望能帮到您。

如何创建XHTML表单,布布扣,bubuko.com

时间: 2024-10-12 03:03:44

如何创建XHTML表单的相关文章

XHTML表单

## XHTML表单 ## HTML表单元素和属性可以分为两种类型: 1. 定义表单整体结构,是浏览器知道如何处理表单数据的元素: 2. 创建输入控件元素:          基本的表单机构 > 最小的表单格式 `<form action = "表单处理程序的URL" metho = "get|post">`属性mothod的值与相同名字的HTTP协议有关,用于得到后台数据:get(用于得到后台数据);post(安全性比get高,理论无大小限制):

Drupal创建自定义表单,上传文件代码

Drupal中创建自定义表单,用来上传文件,对上传文件做一些操作.以下是放在Module中的代码: 一.菜单建立表单路径 /** Implementation of hook_menu(). */ function moduleName_menu () { $items = array(); $items['admin/import'] = array( 'title' => 'title', 'page callback' => 'drupal_get_form', 'page argume

用JS动态创建登录表单,报了个小错误

后来发现原来是: dvObj.style.border='#Red 1px sold'; 其中的Red多谢了一个‘#’, 但是奇怪的是在chrome和firefox都备有报错,但是在ie中报错了. 各位仁兄美眉们一定要小心了额. 下面是这段js动态创建登录框的js代码: 1 onload = function () { 2 var dvObj = document.createElement('div'); 3 dvObj.style.border = 'Red 1px solid'; 4 dv

关于创建Django表单Forms继承BaseForm的问题

在创建Django表单时,因为需要验证用户输入的验证码是否正确,因此需要在session里提取当前验证码的值和POST提交过来的值进行比对,如图: 1 form.py 2 3 from django import forms 4 5 class LoginForms(forms.Form): 6 check_code = forms.CharField() 7 def clean_check_code(self): 8 if self.request.session.get('CheckCode

第三章 XHTML 表单

1.表单的主要作用在于在网页上提供一个图形用户界面,以采集和提交用户输入的数据. 2.HTML表单元素和属性可以分为两种类型:定义表单整体结构,使浏览器知道如何处理表单数据的元素:创建输入控件的元素. 3.表单是一个包含表单元素的区域:表单元素是允许用户在表单中输入信息的元素. <form> 里面有action属性=服务器地址    method 属性=方法 4.***<input>  规定了用户可以输入的类型 其中type属性 =text--文本框  = password—密码框

yii2 创建ActiveForm(表单)

表单的生成表单中的方法 ActiveForm::begin()方法    ActiveForm::end()方法    getClientOptions()方法    其它方法:errorSummary.validate.validateMultiple 表单中的参数 表单form自身的属性    表单中各个项(field)输入框相关的属性        $fieldConfig        关于验证的属性        关于每个field容器样式的属性    ajax验证    前端js事件

【Java】向一个页面发送post请求并获取其处理之后的结果与用javascript创建一个表单后提交的安全性

本文对比与<[Java]读取网页中的内容>(点击打开链接)一文,向一个页面发送get请求,并获取其处理之后的结果,这里是向一个页面发送post请求,并获取其处理之后的结果.如果向一个页面发送get请求,并获取其处理之后的结果,只需要直接读取一个网页用?后接各种用&参数连接的参数即可,而向一个页面发送post请求,并获取其处理之后的结果,就不是这么简单了. 这里方法可能在普通的Java文件中不会太常见,但在jsp.安卓等javaweb的网页编程中却十分常用 import java.io.

第一阶段 XHTML.表单与选择器

一.表单(Form): 1.作用:收集客户端信息,然后发送到服务器上 2.格式 <form action=" 服务器URL" method="get默认值|post传输方式" name="表单名称"> ... </form> 3.表单元素 1.单行文本框 <input type="text" name="名称" value="值" size="文本

1、记录代码----创建隐藏表单并赋值提交

$('#sendEmail').click(function(){ $('#myModal7').modal('hide'); var rows = $('#content_modal7').bootstrapTable('getSelections'); var rows2 = $('#content_table').bootstrapTable('getSelections'); var idArr=[]; var idStr; for(i=0;i<rows2.length;i++){ id