HTML知识积累及实践（四） - 表单元素

最新推荐文章于 2024-07-05 16:41:23 发布

Moresweet猫甜

最新推荐文章于 2024-07-05 16:41:23 发布

阅读量949

点赞数

本文链接：https://blog.csdn.net/qq_38853759/article/details/82595857

版权

html - 表单元素

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素

表单使用表单标签（<form>）定义

<form>

input 元素（多数情况下被用到的表单标签是输入标签，输入类型是由类型属性（type）定义的）

</form>

html标签 - 文本域

当用户要在表单中键入字母、数字等内容时，就会用到文本域。

形如：

<form>

username: <input type="text" name="username" /><br /> 此type input将会创建输入文本域，值的名字为username

userpass: <input type="password" name="pass"><br />此type将创建输入密码框，其输入内容将会自动变为圆点加密

<textarea cols="2" rows="3"></textarea> 此句创建指定行列大小的文本域，可随意输入

</form>

<body>
<form>
      <input type="text" name="username" /><br />
      <input type="password" name="pass"><br />
      <textarea cols="2" rows="3"></textarea> 
</form>
</body>

效果如下：

html标签 - 单选按钮

单选互斥条件，那么name的名字要一样

<form>
    <!--性别：-->
    <input type="radio" name="sex" />男
    <input type="radio" name="sex" />女
    <input type="radio" name="sex" />女博士
</form>

效果图：

复选框
checkbox

<form>
    <!--兴趣爱好：-->
    <input type="check box" />篮球
    <input type="checkbox" />乒乓球
    <input type="checkbox" />书法
    <input type="checkbox" />学习互联网最新的技术
</form>

效果图：

html标签 - Action和确认按钮

当用户单机确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。
由动作属性定义这个文件名通常会对接收到的输入数据进行相关的处理
action="需要提交的地址"
method="提交方式 get/post" get:明文提交 post:服务器提交（隐式提交）
get方式会到地址直接拼接，效率高，快，缺点：url拼接会增长长度，会将url长度超出限制，很不安全
get只传输不考虑安全性的数据，在参数比较少的情况下用
post也会提交，需要自提

<body>
<form action="#" method="get">
    <input type="text" name="username" />
    <input type="submit" value="提交" />
</form>
</body>

效果图：

这个方式用的是get方式，这个方式会把提交的信息直接拼接到url之后

导出提交后的地址栏信息明显发现了拼接的url

file:///C:/Users/moresweet/Desktop/html/bd.html?username=1234

末尾部分有?username=1234

将方式改成post


<body>
<form action="#" method="post">
    <input type="text" name="username" />
    <input type="submit" value="提交" />
</form>
</body>

同样提交1234，url没有直接拼接，但是值还是会隐式的传给action地址

file:///C:/Users/moresweet/Desktop/html/bd.html#

表单元素的应用

<body>
<form action="#" method="post">
	用户名：<input type="text" name="username" /><br /><br />   <!--:如果给了value就会有个默认输入-->
	密码：<input type="password" name="password" />
	性别：
	<input type="radio" />男
	<input type="radio" />女
	<input type="radio" />女博士
	<br /><br />
	兴趣爱好：
	<input type="checkbox" name="love" value="1" />篮球
	<input type="checkbox" name="love" value="2" />乒乓球
	<input type="checkbox" name="love" value="3" />互联网技术
	<input type="checkbox" name="love" value="4" />书法
	<br /><br />
	出生年月：
	<select name="year">
		<option value="0">--请选择--</option>
		<option value="1">1990</option>
		<option value="2">1987</option>
		<option value="3">1992</option>
		<option value="4">1922</option>
	</select>
	描述：
	<textarea cols="50" rows="6"></textarea>
	<br /><br />	
	<input type="submit" value="提 交" />
</form>
</body>

效果图：