Creating HTML forms, set the form properties, single-line text, password boxes, radio buttons, check buttons, push buttons, reset button, submit button, the image domain, file domain, hidden fields, drop-down list item, set of fields, labels.
Creating forms
Forms created in the <body></body>
tag
<body>
<form>
</forrm>
</body>
Form three common attributes
1, action: named form which is processed by a daemon
2, method: specifies the data submitted in which mode to the daemon process
method = "get" relatively small amount of data used to submit the data submitted in the address bar to expose the
method = "post" relatively large amount of data is not in data submitted to the address bar to expose the sensitive data it submitted the best mode to adapt to post
3, enctype: file upload, then set properties
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="yzc.php" method="post" enctype="multipart/form-data"></form>
<!--action=""指名表单由哪一个后台程序处理-->
<!--method=""指名数据以哪一种模式提交给yzc.php处理-->
<!--method="post" 数量比较大的数据 不会在地址栏暴露出提交的数据 所以在提交敏感性数据最好适应post模式-->
<!--method="get" 用于提交比较小量数据 会在地址栏暴露出提交的数据-->
<!--enctype="multipart/form-data" 文件上传的话设置该属性-->
</body>
</html>
Create a single text box, password box, multiline text box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<!--单行文本输入框-->
<input type="text" />
<hr />
<!--单行密码框-->
<input type="password" />
<hr />
<!--文本框和密码框不同是密码框显示的是星号*的掩码-->
<!--多行文本框架 按回车键可以输入下一行-->
<textarea >
</textarea>
<hr />
<!--多行文本款也可以设置大小-->
<textarea cols="50" row="15">
</textarea>
<!--cols="50" 设置宽度-->
<!--row="15" 设置高度-->
</form>
</body>
</html>
After execution, the following
Creating radio buttons and check buttons
Radio buttons are used to set multiple options in the same group where only select a
check button used to set multiple options in the same group where only select multiple
<!--单选按钮用于设置同一分组内的多个选项里只能选择一个-->
<!--复选按钮用于设置同一分组内的多个选项里只能选择多个-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--单选按钮-->
<input type="radio" name="xb" />男
<br />
<input type="radio" name="xb" />女
<!--上面两个name都等于"xb"属于同一个分组,单选按钮同一分组只能选一个 -->
<hr />
<!--复选按钮-->
<input type="checkbox" name="aihao" />篮球
<input type="checkbox" name="aihao" />足球
<input type="checkbox" name="aihao" />跑步
<input type="checkbox" name="aihao" />听音乐
<input type="checkbox" name="aihao" />唱歌
<input type="checkbox" name="aihao" />跳舞
<input type="checkbox" name="aihao" />其他
</body>
</html>
Execution results are as follows
Create a push button and a reset button
Reset button: Reset button to set the value of the element in the form of default values or empty
<!--重置按钮:重置按钮将表单内的元素的值设置为默认的值或者清空-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<!--普通按钮-->
<input type="button" value="我是普通按钮" />
<!--此按钮没有任何作用,需要后期学习js和jquery后赋予按钮各种功能-->
<hr />
<input type="text" />
<br />
<br />
<input type="reset" value="重置" />
</form>
</body>
</html>
Execution results are as follows
Create a submit button and the image domain
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<!--提交按钮-->
<input type="text" />
<input type="submit" value="提交" />
<!--图像域-->
<input type="image" src="../images/qh2.jpg" height="120" width="120" />
<!--图像域也有提交的功能 src=" "是图像的存放的路径-->
</form>
</body>
</html>
Create a file fields and hidden fields
Select the file field is used to perform file upload local files
hidden field to store values of some value but do not show a general procedure for the button background does not show it indeed exist in the window
<!--文件域用于选择本地文件执行文件上传-->
<!--隐藏域用于存储一些值但却不要显示的值 一般用于后台程序 该按钮并不会显示在窗口中 但它确确实实存在 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<!--文件域-->
<input type="file" />
<!--隐藏域-->
<input type="hidden" value="192.188.136.21" />
<!--该按钮并不会显示在窗口中 但它确确实实存在 并且存储了这个IP地址-->
</form>
</body>
</html>
Create a drop-down list item
Drop-down list item: allows the user to select the content they want in advance column of good projects
<!--可以让用户在提前列好的项目中选择自己想要的内容-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<select>
<option>马鞍山</option>
<option>滁州</option>
<option>安庆</option>
<option>宣城</option>
<option>芜湖</option>
</select>
<hr />
<!--可以为下拉列表项设置选择多个-->
<select multiple="multiple" size="2">
<option>马鞍山</option>
<option>滁州</option>
<option>安庆</option>
<option>宣城</option>
<option>芜湖</option>
</select>
<hr />
<!--可以设置某个项是默认选择项 这里默认选择滁州-->
<select>
<option>马鞍山</option>
<option selected="selected" >滁州</option>
<option>安庆</option>
<option>宣城</option>
<option>芜湖</option>
</select>
</form>
</body>
</html>
Execution results are as follows
Form elements common attributes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<!--设置默认值-->
<input type="text" value="我是默认值" />
<hr />
<!--value用于按钮时显示到按钮上面去了-->
<input type="button" value="我是按钮">
<hr />
<!--只读属性 文本框里面的文字不能修改-->
<input type="text" value="我是默认值" readonly="readonly" />
<hr />
<!--设置让元素失效-->
<input type="text" disabled="disabled" />
<hr />
<!--设置输入最大长度内容是多少 这里设置的长度是6位-->
<input type="text" maxlength="6" />
<hr />
<!--在单选按钮中使男默认选中-->
<input type="radio" checked="checked" name="xb" />男
<input type="radio" name="xb" />女
<hr />
<!--在复选按钮中使足球和羽毛球默认选中-->
<input type="checkbox" />篮球
<input type="checkbox" checked="checked"/>足球
<input type="checkbox" checked="checked"/>羽毛球
<input type="checkbox" />乒乓球
<input type="checkbox" />手球
</form>
</body>
</html>
Implementation of the results is as follows
Create a set of fields, labels
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<fieldset>
<legend>基本信息</legend>
<!--字段集的标题是基本信息-->
<input type="text" />
<input type="radio" name="xb"/>男
<input type="radio" name="xb"/>女
<input type="text" />
</fieldset>
<br />
<br />
<fieldset>
<legend>详细信息</legend>
<!--用标签 <label></label>进行设置说明性文本-->
<label>用户名称 <input type="text" /></label>
<label>性别 <input type="radio" name="xb"/></label>男
<input type="radio" name="xb"/>女
<label>用户地址 <input type="text" /></label> </fieldset>
</form>
</body>
</html>
Execution results are as follows