动态网站设计基础之表单

最新推荐文章于 2023-02-17 10:01:19 发布

何以消愁

最新推荐文章于 2023-02-17 10:01:19 发布

阅读量573

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/weixin_45740885/article/details/116269945

版权

网站设计基础之表单的应用

表单的构成
由表单信息以及表单控件构成，一个表单就是一个表单域。
表单的创建
通过<-form><-form/>标记被用于定义表单域。
表单属性（就是form属性）
<1>action
用于指定接收并处理表单数据的服务器程序的url地址。
<2>methon
用于设置表单数据的提交方式，有get以及post方法。get是一次性提交，保密性差，而post是一段一段提交，保密性好。
<3>name
指定表单名称。
<4>autocomplete
是否具有自动完成功能，即是否具有历史记录，有两个值来对其控制，即on和off。
<5>novalidate
指定提交表单时是否对其进行有效检查。值又两个，即true，false。
input元素及其属性
在这不一一介绍。
input元素的type属性
<1>text,单行文本输入。
<2>password,密码框，以原点形式显示。
<3>radio,单选框，二者选其一或者多者选其一。记住，其name属性值必须一致。
<4>checkbox,复选框。就是进行多选，可配合checked进行，指定默认值。
<5>reset,重置按钮，把所有信息都归回原来的值。
<6>提交按钮，submit，可用value对其进行改变提交哦按钮上的默认文本。
<7>image，图形形式提交按钮，使得外观更加漂亮。
<8>文件域，会出现一个文本框，然后用户可以进行悬着图片或者填写图片的位置。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>input控件</title>
</head>
<body>
<form action="#" method="post">
	用户名：                                              <!--text单行文本输入框-->
	<input type="text" value="张三" maxlength="6" /><br /><br />  
    密码：                                                 <!--password密码输入框-->
    <input type="password" size="40" /><br /><br />                         
    性别：                                                 <!--radio单选按钮-->
    <input type="radio" name="sex" checked="checked" />男
    <input type="radio" name="sex" />女<br /><br />					
    兴趣：                                                  <!--checkbox复选框-->
    <input type="checkbox" />唱歌
    <input type="checkbox" />跳舞
    <input type="checkbox" />游泳<br /><br />
    上传头像：
    <input type="file" /><br /><br />                 <!--file文件域-->
    <input type="submit" />                             <!--submit提交按钮-->                                   
    <input type="reset" />                              <!--reset重置按钮-->   
    <input type="button" value="普通按钮" />          <!--button普通按钮-->  
    <input type="image" src="images/login.gif" />      <!--image图像域-->  
    <input type="hidden" />                            <!--hidden隐藏域-->                                       
</form>
</body>
</html>

运行结果如图所示：
在这里插入图片描述

	<9>email类型，会有文本框，自己会有错误提示。
	<10>url类型，会有文本框，输入错误会有提示。
	<11>tel类型，会有文本框，是一个纯数字的文本框，会有错误提示,一般配合patter属性使用。
	<12>search，会有文本框，是一个搜索域，当文本框中输入文字时，右边会有叉叉，表示删除。
	<13>color，涉资颜色文本框，有默认值，#000000，可以通过value值来改变默认值。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>input类型</title>
</head>
<body>
<form action="#" method="get">
请输入您的邮箱：<input type="email" name="formmail"/><br/>
请输入个人网址：<input type="url" name="user_url"/><br/>
请输入电话号码：<input type="tel" name="telphone" pattern="^\d{11}$"/><br/>
输入搜索关键词：<input type="search" name="searchinfo"/><br/>
请选取一种颜色：<input type="color" name="color1"/>
<input type="color" name="color2" value="#FF3E96"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>

运行结果如图所示：
在这里插入图片描述

需要注意的是：颜色文本框可以进行颜色选择。
<14>number属性，提供数值输入文本框，有value,max，min，step，其中value是文本框默认值。其它就是字面意思，当文本框中输入不是数字时，会有错误提示。
<15>Data pickers,用于选择时间，data，年月日。month，年月。week，年，星期。time，时，分。dtatime，utc时间datatime，年月日。datatime-local，当地时间，年月日。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>时间日期类型的使用</title>
</head>
<body>
<form action="#" method="get">
  <input type="date"/>&nbsp;
  <input type="month"/>&nbsp;
  <input type="week"/>&nbsp;
  <input type="time"/>&nbsp;
  <input type="datetime"/>&nbsp;
  <input type="datetime-local"/>
  <input type="submit" value="提交"/>
</form>
</body>
</html>

运算结果如图所示：
在这里插入图片描述
6.input的其它属性

autofocus，自动获得光标。
form，表单id，即使不是在表单中的内容，都可以显示在表单中，只需要对其进行id选择，首先，在form中写出id号，然后在需要的块中，添加此id即可。`

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>autofocus属性的使用</title>
</head>
<body>
<form action="#" method="get" id="user_form">
请输入您的姓名：<input type="text" name="first_name"/>
<input type="submit" value="提交" />	
</form>
<p>下面的输入框在form元素外，但因为指定了form属性为表单的id，所以该输入框仍然属于表单的一部分。</p>
请输入您的昵称：<input type="text" name="last_name" form="user_form"/><br/>
</body>
</html>

list，表选择。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>list属性的使用</title>
</head>
<body>
<form action="#" method="get">
请输入网址：<input type="url" list="url_list" name="weburl"/>
<datalist id="url_list">
	<option label="新浪" value="http://www.sina.com.cn"></option>
    <option label="搜狐" value="http://www.sohu.com"></option>
    <option label="传智" value="http://www.itcast.cn/"></option>
</datalist>
<input type="submit" value="提交"/>
</form>
</body>
</html>

placeholder，提示文本框中应该填入的一般信息，在文本框中显示。
textarea，有cols以及rows两个值，cols表示每行能够写入多少个值，rows表示共有多少行，是一个文本框。其中还有readonly（表示只读），disabled（第一次加载时禁用该控件）。
select，选择框，一般配合option使用，里面至少要嵌套一个option选择，具有下拉列表的效果，和list差不多。其中如果在select和option中再嵌套一个optground，则可以显示下拉之后一个大的包含多个小的，即北京，（东城区，西城区，南城区）。

何以消愁

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
动态网站设计基础之表单

网站设计基础之表单的应用表单的构成由表单信息以及表单控件构成，一个表单就是一个表单域。表单的创建通过<-form><-form/>标记被用于定义表单域。表单属性（就是form属性）<1>action用于指定接收并处理表单数据的服务器程序的url地址。<2>methon用于设置表单数据的提交方式，有get以及post方法。get是一次性提交，保密性差，而post是一段一段提交，保密性好。<3>name指定表单名称。
复制链接

扫一扫