• HTML-form表单


    Form表单用于用户进行登录,注册,提交等场景,所有要提交的数据都必须放在form标签中 <form action=" "  method=" ">;

    action:提交地址、动作,与input标签中type标签的submit属性相关联。  <input type="submit" value="提交" />,提交地址是action的地址

    method:提交方法,有get和post两种提交方法。

        get方法:提交数据可以在URL中看见,

                   (1)以http://reg.email.163.com/unireg/call.do?cmd=register.entrance&from=126mail传递参数

           (2)URL长度有限制,所以传递的参数数据就有限制

           (3)由于数据可以看见,所以不安全

           (4)网页默认的请求是get

                             (5)可以进行资源定位

        post方法:   

           (1) 将form data 保存在http的请求

           (2) 没有长度限制

           (3) 提交的数据在url是看不到的,比较安全

           (4) 往往在开发中用于提交数据form表单提交post

           (5) 文件上传 method = post   enctype=multipart/form-data

                             (6)post方式无法做资源定位

    表单标签

    <form> 定义供用户输入的表单
    <input> 定义输入域
    <textarea> 定义文本域 (一个多行的输入控件)
    <label> 定义了 <input> 元素的标签,一般为输入标题
    <fieldset> 定义了一组相关的表单元素,并使用外框包含起来
    <legend> 定义了 <fieldset> 元素的标题
    <select> 定义了下拉选项列表
    <optgroup> 定义选项组
    <option> 定义下拉列表中的选项
    <button> 定义一个点击按钮
    <datalist>     New 指定一个预先定义的输入控件选项列表
    <keygen>     New 定义了表单的密钥对生成器字段
    <output>      New 定义一个计算结果

    input标签:输入框,其常用属性如下:

    name:指定输入框名字,方便提交表格;

    value:属性值,文本框内容;

    placeholder:可用于文本框默认显示内容;

    readonly:只读状态,输入框无法进行文字修改;

    disabled:禁用状态;

    size:由于输入框是单行的,所以只能设置宽度;

    maxlength:限制输入框最大输入的字符个数;

    type属性:

    text:普通文本,默认属性;

    password:文本密码,输入的内容不显示,通常用来设置密码;

    submit:提交按钮;

    checkbox:复选框,可以进行多项选择;

    lable:单选框,多个关联选项name属性保持一致,<labke  for=""></lable>:用于关联单选按钮与文字;

    hidden:隐藏字段,不会在页面展示;

    下拉框

    select:下拉选择框,属性可以设置name,每个选项都有一个option,默认选中使用selected

    籍贯:<select name="from">
             <option value="bj">北京</option>
             <option value="sh">上海</option>
             <option value="gz">广州</option>
             <option value="sz">深圳</option>
          </select>
    

      

    文本域

    textarea:文本域,可以输入多行文本;

    属性:

    cols:列数(宽度)

    rows:行数(高度)

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>form表单</title>
    	</head>
    	<body>
    		<form>
    			<!-- 文本框 -->
    			用户名:<input type="text" placeholder="请输入您的用户名"/>
    			<input type="button" value="请点击"/><br />  
    			密码:<input type="password" placeholder="请输入您的密码"/>
    			<input type="submit" value="请确认"/>
    			<br />
    			<input type="hidden" value="隐藏"/>
    			<!-- 复选框 -->
    			你喜欢什么水果?<br />
    			苹果 <input type="checkbox" /><br />
    			香蕉 <input type="checkbox" /><br />
    			葡萄  <input type="checkbox" /><br />
    			<!-- 单选框 -->
    			请选择您的性别:
    			<input type="radio" name="sex" id="nan" value="0"/ checked="a"><label for="nan">男 </label>
    			 <input type="radio" name="sex" id="nv"/><label for="nv">女</label>
    			<br />
    			<!-- 下拉列表 -->
    			请选择你喜欢的科目:
    			<select size="1" name="form">
    				<option>语文</option>
    				<option selected="selected">数学</option>
    				<option>英语</option>
    			</select>
    		</form>
    		<!--文本域 -->
    		<textarea cols="20" rows="20">请输入内容</textarea>
    	</body>
    </html>
    

    g

  • 相关阅读:
    IE6下不能定义1px高度的容器和IE6 双边距
    py django 渲染前端打包的视图
    关于常见的递推关系。
    题解:一些递推的题。
    题解:极值问题。
    题解:城南树林。
    题解:论编辑器的和谐共处。
    题解:左右横跳。
    题解:斑马,斑马(zebra)
    找 前端 私活
  • 原文地址:https://www.cnblogs.com/webdelovely/p/11411811.html
Copyright © 2020-2023  润新知