form input select textarea form

The form
tag is the form tag used to declare the form area, that is, the element attributes and data included in it to make them a part. The
main use is to set an effective area for the submit and reset buttons
. There are also some form tags such as action , method, etc These important attributes
action
action attribute is used to specify the address of the form submission, such as the action="login.jspform data will be submitted to the login.jsp page for processing.
The method
method attribute is used to set the submission method of the form data. Its value is GET or POST, where GET is the default value. The data submitted in this way will be displayed in the address bar of the browser, with poor confidentiality and limited data volume. The POST submission method not only has good confidentiality, but also can submit a large amount of data. In theory, there is no limitation on the length of the data, so the POST method is usually used to submit the form in development.

<form action="url地址" method="提交方式" name="表单名称">
	........
	........
	数据内容
	........
	<input type="reset"/>
	<!--重置按钮-->
	<input type="submit"/>
	<!--提交按钮-->
</form>

The input
input tag is <input />used to create a text input box, which
can be added to typechange the style of the characters entered in the text box,
or it can be added valueas a text box to add default values

<input type="text" value="爱你哟"/>

Set the plain text input box and set love you as the default value of the text box

There are also some examples as follows
<input type="text"/>to create a text input box with visible input content. You can add value="default value" in the label to add a default value to the text box

<input type="password"/>Used to create a text input box with invisible content

<input type="radio" />Used to create an option
Note:

性别:<input type="radio" name="sex"/><input type="radio" name="sex" checked="checked"/><br />
       <!--<input type="radio" />用于创建一个选项 加入 name(<input type="radio" name="sex"/>)用于为标签分组 可以为多个选项设置为同一个组 当他们属于同一个组后 他们所有的选项只能同时选一个
       checked="checked"表示默认选中 即当用户不选择 则网页会默认选中有这个的标签
       -->

Insert picture description here


type="checkbox"Used to create multiple selection options but the style is box + tick and is not affected by name (grouping)
Insert picture description here
<input type="reset" value="点我!!!"/>type="teset" is used to create a reset button to reset the content of the data entered in the form value can be reset The button changes the above word
Insert picture description here
<input type="submit"/>type="submit" to create a submit button value, or to the submit button to change the above word
Insert picture description here
<input type="file" />type="file" is the file upload domain to select the file

<input type="hidden" name="sex" value="123" />type=hidden is a hidden domain, that is, when we want to send some information without user involvement, we can use the hidden domain. When submitting, it will still be sent to the server. The
hidden domain will not be displayed in the webpage. It is only used on the webpage. Transfer information between du. It is the next more special form element, which can retain certain values ​​of the web page to some extent. The operation of the webpage is not preserved. After a webpage is browsed, all the content will not be preserved. By hiding the domain, some values ​​during the running of the webpage can be preserved. For example, when you put a user name, password and other information in a from, these are visible. If you put it in a hidden field, when it clicks, it will not only transmit the value of the user name and password, but also set the hidden field. The value is passed to the server, generally useful in dynamic web pages such as ASP pages


select
select tag is used to create a drop-down option
The select tag is used to create the drop-down list box. The option tag is used to add the content of the drop-down list box. The
selected="selected" element is used to set the tag where it is located by default.

<select>
			<option>请选择国籍</option>
			<option selected="selected">中国</option>
			<option>美国</option>
			<option>俄罗斯</option>
			<option>英国</option>
		</select>

Insert picture description here
textarea
textarea tag is used to create a multi-line text input box rous is used to set the height that can display several lines cols is used to set each line can display several characters width
textarea text box default value is the content in the start tag and end tag

<textarea rous="10" cols="20">爱你哟</textarea>

If you want to format the form to make the form look angular and well-formatted, you can put the elements in the form into the cell as follows
Insert picture description here

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form>
			用户名称:<input type="text" value="默认值" /><br />
       <!-- <input type="text"/>用于创建一个输入内容可视的文本输入框 可在标签里面加入value="默认值"来为文本框添加默认值-->
        密码:<input type="password"/><br/> 
       <!-- <input type="password"/>用于创建一个内容不可视的文本输入框-->
       性别:<input type="radio" name="sex"/><input type="radio" name="sex" checked="checked"/><br />
       <!--<input type="radio" />用于创建一个选项 加入 name(<input type="radio" name="sex"/>)用于为标签分组 可以为多个选项设置为同一个组 当他们属于同一个组后 他们所有的选项只能同时选一个
       	checked="checked"表示默认选中 即当用户不选择 则网页会默认选中有这个的标签
       -->
       	兴趣爱好:<input type="checkbox"/>java<input type="checkbox"/>html<input type="checkbox"/>css<br />
       <!--type="checkbox"用于创建多选选项 但样式是方框+打勾 且不受name(分组)的影响-->
		国籍:<select>
			<option>请选择国籍</option>
			<option selected="selected">中国</option>
			<option>美国</option>
			<option>俄罗斯</option>
			<option>英国</option>
		</select><br />
		<!-- select标签用来创建下拉列表框 option标签用来添加下拉列表框里面的内容
			selected="selected"元素用来设置他所在标签为默认选中
		-->
		自我评价:<textarea rous="10" cols="20">爱你哟</textarea>
		<!--textarea标签用于创建一个多行文本输入框  rous用来设置可以显示几行的高度 cols用来设置每行可以显示几个字符宽度
			textarea文本框默认值是起始标签和结束标签中的内容
		-->
		<input type="reset" value="点我!!!"/>
		<!--type="teset"用于创建一个重置按钮 可重置表单里所输入数据的内容
			value可以给重置按钮改变上面的字
		-->
		<input type="submit"/>
		<!--type="submit"用于创建一个提交按钮 
			value也可以给提交按钮改变上面的字
		-->
		<input type="file" /> 
		<!--type="file"是文件上传域 用来选择文件-->
		<input type="hidden" name="sex" value="123" />
		<!--type=hidden是隐藏域 即当我们要发送某些信息,不需要用户参与,就可以使用隐藏域
			提交的时候照样会发送给服务器 加入属性没有任何作用
		-->
		</form>
		<!--
			何为表单:
			表单 即一个表 然后里面可以输入或填入各种信息 比如填入用户账号 密码 性别 喜好 国籍...
			即可以填入多种数据 且 各自之间有一定的格式 就比如注册某些账号时候 页面中 需要填入用户信息的那一片 就是一个表单
        	form标签即表单标签 可用来创建一个表单
        -->
        
	</body>
</html>

Guess you like

Origin blog.csdn.net/qq_45821251/article/details/108816033