HTML学习篇(八) 表单

HTML学习篇(八) 表单
0

<form><label><input>

  在 HTML5 中,表单的填写提交使用 form 标签,然后里面包含各种文字标签和输入项(文字输入框、单选按钮、多选按钮等),还有按钮等。

下面是一个简单的 HTML 表单:

<form action="/submitToServer" method="post">
	<div>
	  <label for="name">名字:</label> <input type="text" id="name" name="user_name">
	</div>
	<div>
	  <label for="mail">E-mail:</label> <input type="email" id="mail" name="user_mail">
	</div>
	<div>
	  <label for="msg">信息:</label> <textarea id="msg" name="user_message"></textarea>
	</div>
	<div class="button">
	  <button type="submit">提交</button>
	</div>
</form>

%E5%9B%BE%E7%89%87

  <form> 内的 action 和 method 属性分别用来指定提交表单数据的目标地址(URL)以及HTTP的请求方式(post 或 get)。

  <label> 是表单项的文字标签,可以使用 for 属性来指定绑定的表单输入项(input 的 id 属性),通过绑定可以点击标签将焦点定位到对应表单项。

  <input> 根据 type 属性的不同来显示不同的表单项,默认就是这里的 “text”,代表单行文本输入,另外还有 email、radio 和 checkbox 等,详情可参考 input类型

  <textarea> 跟 input 类似,但是可以输入多行的文本,详细的属性控制可参考<textarea>

  <button> 设置 type 为 “submit”,即将数据发送到服务器,而它的 type 默认是 “button”(默认点击无任何响应,需要自己写 JavaScript 指定响应操作)。

  另外值得一提的是,<input> 也可以指定 type 为 “button”,默认显示的效果与 <button>一样,但是 <input> 所对应的按钮只能通过 value 属性来指定按钮文字,因此不受 CSS 的影响。

上一篇: HTML学习篇(七) 表格

1赞