html中的form表单_ajax提交form表单数据

html中的form表单_ajax提交form表单数据1.form元素HTML中用于创建表单的标签是form,表单以from开头,以/from结尾.2.form元素的基本属性from元素通常是用来采集用户输入信息的表单控

1.<form>元素

           HTML中用于创建表单的标签是<form>,表单以<from>开头,以</from>结尾.

2.<form>元素的基本属性

          <from>元素通常是用来采集用户输入信息的表单控件,也可以包含其他元素,如段落、标题等。但是,不能包含另一个<from>元素,即<from>元素不能嵌套。

html中的form表单_ajax提交form表单数据

  补充:method属性——– method属性指定浏览器向服务器发送表单数据时可以使用的两种方法。

  •  get :使用get方法向服务器传送表单数据时,表单数据被附加在<from>元素中有action指定的URL尾部。使用get请求的优点有可以被缓存、能保存在历史记录中、可以被收为书签。缺点有不能在敏感数据中使用、不够安全信息暴露在地址栏上、数据有长度限制(地址栏默认大小64kb)且数据只能读取不能修改。
  •  post :使用post方法向服务器传送表单数据时,表单数据在HTTP头部透明的传送。使用post请求的优点有比get安全,不会将信息暴露在地址栏上、对数据长度没有限制。缺点有不可以被缓存、不能保存在历史记录中、不可以被收为书签。
<form action="login.aspx" method="post">
</form>

3.<form>表单的输入元素

  1.<input>元素

        用户输入数据时使用的文本框、复选框、单选按钮等都是通过<input>元素创建的,<input>元素只能在<form>里面使用,用来创建表单的输入元素。

  1.type属性

     <input>标签的type属性用于指定输入控件,type的值很多,具体用法有:

  • text(文本框)—定义单行输入字段,可输入字母、数字等内容,默认20个字符。
  • radio(单选按钮)—定义单选按钮,从给定的选项中选其一。
  • checkbox(复选框)—定义复选框,从给定的选项选其一或若干选项。
  • password(密码框)—定义密码字段,用于输入密码,输入内容以*的形式出现(掩码)。
  • submit(提交按钮)—定义”提交“按钮,将表单发送到服务器。
  • bottom(单击按钮)—定义普通按钮,用于通过JavaScript启动脚本。
  • image(图像按钮)—定义图像形式的提交按钮,用户可以通过不同的图像达到美观的效果。
  • hidden(隐藏字段)—定义隐藏的输入字段。
  • reset(重置按钮)—定义”重置“按钮,点击重置按钮可清楚表单中的所有数据。
  • file(文件域)—定义输入字段和”浏览“按钮,用于上传文件。
  • email(e-mail地址)—用于输入单个电子邮件地址或电子邮件地址列表。多个电子邮件地址可以使用逗号分隔的列表形式输入。
  • color(颜色选择框)—用于使用色盘选择颜色。
  • date(日期)—用于输入日历日期。
  • datetime(日期和时间)—用于输入时区为:格林尼治/国际标准时间”的日期和时间。
  • datetime-local(日期和时间)—用于输入本地日期和时间。
  • month(年和月)—输入年份和月份。
  • time(时间)—用于输入由时、分、秒以及小数秒组成的时间。
  • week(星期)—输入由年份与周期构成的日期。
  • number(数字输入框)—输入数字。
  • range(数字滑块)—该控件类型以拖动条的形式呈现,使用户可以从一个数字范围内选择取值。
  • search(搜索文本框)—用于输入关键词。
  • tel(文本框)—输入电话号码。
  • url(网站地址)—输入网站URL。

  2.type的其他属性

  • name—元素名称。
  • id—元素的唯一标识符。
  • value—元素的值。
  • size—以字符个数设定元素的宽度。
  • maxlength—元素接受字符个数的上限。
  • checked—元素是否被选中。
  • readonly—表示这个元素只读。
  • disabled—表示禁用input元素,被禁用的input不可用也不可以点击。
  • required—提交信息时如果input是空的时候会提示,不同浏览器提示信息不同。
  • autofocus—网页打开时自动获取光标。
    <body align="center">
    <h3>金冠书城用户调查表</h3>
    	<form>
    		<p>用户名:<input type="text" name="username" autofocus></p>
    		<p>登录密码:<input type="password" name="pwd" required></p>
    		<p>请选择您的性别:<input type="radio" name="gender" value="男">男
    		<input type="radio" name="gender" value="女">女</p>
    		<p>请选择您喜欢的书籍类型:<input type="checkbox" value="古代言情">古代言情
    		<input type="checkbox" value="现代言情">现代言情
    		<input type="checkbox" value="权谋">权谋
    		<input type="checkbox" value="重生">重生
    		<input type="checkbox" value="穿越">穿越</p>
            <p><input type="image" src="1.jpg" width="100" height="150"></p>
            <p><input type="hidden" value="隐藏的字段"></p>
            <p><input type="file" >
            <input type="email">
            <input type="color">
            <input type="date">
            <input type="range">
            <input type="tel"></p>
    		<p><input type="reset" value="重置">
    		<input type="submit" value="提交">
    		<input type="bottom" value="普通"></p>
    	</form>
    </body>

效果展示:

html中的form表单_ajax提交form表单数据

 2.<label>元素

   <label>元素是为<input>定义的标签,不会给用户展示任何样式。

<form>
		<label for="username">用户名1:</label>
			<input type="text" name="username" id="username" value="zhangsan" >
	</form>

效果展示:

html中的form表单_ajax提交form表单数据

 3.<select>标签

    <select>元素用于创建下拉列表,下拉列表中每一个选项是一个<option>元素。

<p>
		<select>
			<option value="">请选择您的地址:</option>
			<option value="重庆">重庆</option>
			<option value="河南">河南</option>
			<option value="河北">河北</option>
			<option value="...">...</option>
		</select>
		</p>

 效果展示:         html中的form表单_ajax提交form表单数据

4.<textarea>标签

   <textarea>标签通常用于创建多行文本框,且框可以拉伸。常用的属性有三个,分别是:

  • cols—以字符个数设定的多行文本框的宽度。
  • rows—以字符个数设定的多行文本框的高度。
            <p>
    			<textarea cols="100" rows="10">请用优雅的语言描述一下自己:</textarea>
    		</p>

    效果展示:html中的form表单_ajax提交form表单数据

今天的文章html中的form表单_ajax提交form表单数据分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/71657.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注