Main content
Form application scenarios
Form structure
Use of common form elements
Form interaction properties
Cases
The registration or login page is used to
collect information, package data, transmit to the server, and interact with the web
表单
<form>
表单元素：文本框，单选框，复选框，按钮，列表...
<input>表单输入
<select>菜单和列表
<option>列表项目
<textarea>文字域
<optgroup>项目分组
</form>
<input type="类型属性" name="名称"/>
type：text,password,file,checkbox,radio,button,submit,reset,hidden,image
注册信息小栗子
<h1 align="center">注册信息</h1>
<hr color="#369" />
<form>
<table width="600px" bgcolor="#f2f2f2" align="center">
<tr>
<td align="right">姓名： </td>
<td align="left"><input type="text" name="username" size="25" maxlength="6" placeholder="please input your name" /> </td>
</tr>
<tr>
<td align="right">邮箱：</td>
<td align="left"><input type="text" name="email" size="25" value="@163.com" /> </td>
</tr>
<tr>
<td align="right">密码： </td>
<td align="left"><input type="password" name="password" size="25" maxlength="6" placeholder="please input your password" /> </td>
</tr>
<tr>
<td align="right">确认密码：</td>
<td align="left"><input type="password" name="password" size="25" maxlength="6" placeholder="please input your password again" /> </td>
</tr>
<tr>
<td align="right"> 上传图片：</td>
<td align="left"> <input type="file" name="file" /> </td>
</tr>
<tr>
<td align="right"> 性别：</td>
<td align="left"> <input type="radio" name="sex" value="male" checked/>男
<input type="radio" name="sex" value="female"/>女
<input type="radio" name="sex" value="mystery"/>秘密
</td>
</tr>
<tr>
<td align="right">爱好：</td>
<td align="left"> <input type="checkbox" name="hobby" value="read" checked/>阅读
<input type="checkbox" name="hobby" value="dance"/>跳舞
<input type="checkbox" name="hobby" value="sing"/>唱歌
</td>
</tr>
<tr>
<td align="right">爱好的食物：</td>
<td align="left"> <input type="checkbox" name="food" value="ham" checked/>汉堡
<input type="checkbox" name="food" value="fries"/>薯条
<input type="checkbox" name="food" value="rice"/>米饭
</td>
</tr>
<input type="button" name="button" value="click me"/>
<input type="submit" name="submit" value="submit"/>
<input type="reset" name="reset" value="reset"/>
<input type="image" name="image_button" src="imageurl"/>
</table>
</form>
The value value is the value that the form will transmit to the server
单行文本域 要放在form里
<input type="text">
可以拥有的属性：name，maxlength，size，value,placeholder规定用户填写输入字段的提示
密码域也是文本域的形式，输入到文本域的文字"...."显示
图像域：type="image" name="" src="imageurl"
隐藏域：type="hidden"
<select name="城市">菜单和列表
<option>--请选择--</option>
<optgroup label="1">
<option value="g">广州</option>
<option value="s" selected>上海</option>
</optgroup>
<optgroup label="2">
<option value="d">东莞</option>
<option value="c">长沙</option>
</optgroup>
</select>
select标签属性有：
name设置下拉菜单和列表的名称,multiple设置可多选,size设置列表可见选项数
<optgroup>项目分组
<textarea name="" rows="" cols="" placeholder="please input some words">多行文本域</textarea>
Although the whole is completed, the layout is not good, add corresponding attributes to make it more beautiful
Enter the data to submit the form, package it to the web server, and then php, asp processing
The difference between get and post
get: Use url to pass parameters, there are restrictions on the data of the information sent, generally used for information acquisition
post: form data as a part of the http request body, there is no limit to the amount of information sent, generally used to modify the resources on the server.
<form action="action.php" method="post" name="">
表单元素
</form>
action URL 提交表单时向何处发送表单数据
method get,post 设置表单以何种方式发送到指定页面
name form_name 表单的名称
target _blank,_self,_parent,_top 在何处打开action URL
application/x-www-form-urlencoded
enctype multipart/form-data 在发送表单数据之前如何对其进行编码
text/plain
Summary
Add corresponding form elements to the form tag: text field, single selection, check, list, button
type: text, password, file, radio, checkbox
Single line text field: name, maxlength, size, value, placeholder prompt
get The difference with post.
next: a simple html structure