HTML 表单

2020/2/18 20:10:27 人评论 次浏览 分类:学习教程

HTML 表单用于搜集不同类型的用户输入。
(ps:本文章是预习内容,纯文字,详细请看下面的网页)
借鉴网页:https://www.w3school.com.cn/html/html_forms.asp
HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

<input>元素
<input>元素是最重要的表单元素。

元素有很多形态,根据不同的 type 属性。

提交按钮
元素<input type="submit"> 定义用于向表单处理程序(form-handler)提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。
action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

通常,表单会被提交到 web 服务器上的网页。

POST&GET

使用 GET 时,表单数据在页面地址栏中是可见的
POST 的安全性更加,因为在页面地址栏中被提交的数据是不可见的。

Name 属性

如果要正确地被提交,每个输入字段必须设置一个 name 属性。
本例只会提交 “Last name” 输入字段:

	<form action="/demo/demo_form.asp">
	First name:<br>
	<input type="text" value="Mickey">
	<br>
	Last name:<br>
	<input type="text" name="lastname" value="Mouse">
	<br><br>
	<input type="submit" value="Submit">
	</form> 
	<p>如果您点击提交,表单数据会被发送到名为 demo_form.asp 的页面。</p>
	<p>first name 不会被提交,因为此 input 元素没有 name 属性。</p>
	

<fieldset> 组合表单数据

<fieldset>元素组合表单中的相关数据

<legend> 元素为 <fieldset> 元素定义标题。

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form> 

<select> 元素(下拉列表)

<select> 元素定义下拉列表:

<option> 元素定义待选择的选项。
列表通常会把首个选项显示为被选选项。
您能够通过添加 selected 属性来定义预定义选项。

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

HTML5 元素

<datalist> 元素为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>
陈大爷她老了
发布了9 篇原创文章 · 获赞 2 · 访问量 217
私信 关注

相关资讯

    暂无相关的资讯...

共有访客发表了评论 网友评论

验证码: 看不清楚?
    -->