What properties does the HTML/CSS text input box have?

The attributes of the text input box are: 1. accept, which specifies the type of file submitted through file upload; 2. alt, which defines the alternative text for image input; 3. disabled, which defines the disabled state; 4. formaction , stipulates the URL of the file that processes the input control when the form is submitted; 5. formtarget, stipulates where to display the name or keyword of the received response after submitting the form; 6. cols, stipulates the visible width in the text area; 7. readonly , equal to read-only status.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In HTML/CSS, there are two types of text input boxes:

• input: single-line text input box

• textarea : Multi-line text input box

Let’s talk about the properties supported by these two input boxes.

Attributes of the input input box

<input> tag specifies the input field in which the user can enter data.

Attributes	Value	Description
accept	audio/* video/* image/*MIME_type	Specifies the type of file submitted through file upload. (only for type="file")
align	left right top middle bottom	HTML5 is obsolete and deprecated. Specifies the alignment of the image input. (Only for type="image")
alt	text	Define the alternative text for image input . (only for type="image")
autocomplete	on The off	autocomplete attribute specifies whether the <input> element input field should have autocomplete enabled.
autofocus	autofocus	The attribute specifies that the <input> element should automatically gain focus when the page loads.
checked	checked	The checked attribute specifies which <input> elements should be pre-selected when the page loads. (Only for type="checkbox" or type="radio")
disabled	disabled	disabled attribute specifies the
form	form_id	The form attribute specifies the form or forms to which the <input> element belongs. The
formaction	URL	property specifies the URL of the file that handles the input control when the form is submitted. (Only for type="submit" and type="image")
formenctype	application/x-www-form-urlencoded multipart/form-data The text/plain	attribute specifies how form data is encoded when submitted to the server (only suitable for type="submit" and type="image").
formmethod	get post	Define the HTTP method that sends form data to the action URL. (Only suitable for type="submit" and type="image")
formnovalidate	formnovalidate	formnovalidate attribute overrides the element novalidate attribute.
formtarget	_blank _self _parent _topframename	specifies where to display the name or keyword of the response received after submitting the form. (Only suitable for type="submit" and type="image")
height	pixels	Requirements The height of the element. (Only for type="image")
list	datalist_id	attribute refers to the
max	number The date	attribute specifies the maximum value of the <input> element. The
maxlength	number	attribute specifies the maximum number of characters allowed in the <input> element.
min	number The date	attribute specifies the minimum value of the <input> element. The
multiple	multiple	attribute specifies that the user is allowed to enter multiple values ​​into the <input> element.
name	text	The name attribute specifies the name of the <input> element.
pattern	regexp	The pattern attribute specifies the regular expression used to validate the value of the <input> element.
placeholder	text	The placeholder attribute specifies a short tooltip that describes the expected value of the input <input> field .
readonly	readonly	The readonly attribute specifies that the input field is read-only. The
required	required	attribute specifies that the input field must be filled in before the form is submitted.
size	number	The size attribute specifies the visible width of the <input> element in characters.
src	URL	The src attribute specifies the URL of the image that appears as a submit button. (only for type="image")
step	number	step attribute specifies the legal number intervals for the <input> element .
type	button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week	type attribute specifies the < to be displayed ;input> The type of element.
value	text	Specifies the value of the <input> element value.
width	pixels	The width attribute specifies the width of the <input> element. (Only for type="image")

##The type attribute specifies the type of <input> element to be displayed. The default type is: text.

Examples of new type attribute values ​​in HTML5

• color

The color selector pops up when clicked, you can choose any color

• number

Enter a number within the range. You can manually enter a number out of the range, but you cannot submit it.

• tel

  Enter a phone number, only Safari supports
  

• email

  Comes with a detection function. When submitting, it will detect whether the @ symbol is included and whether there are characters before and after the @ symbol
  

• range

  
  

• url

  The entered URL must start with http:// and must have characters after it, otherwise it cannot be submitted
  

• search
  Define the text field used to enter the search string

  
  

• Date Control - date

<input>

• Time control- time

<input>
<input>

• Date time control-datetime-local

##

<input>

Month control-month

<input>

Week control- week

<input>

Date and time control--datetime

##

<input>

Note: The date and time control also supports min and max attributes. Indicates the minimum and maximum time that can be set

<input>

Attributes of the textarea input box

PropertiesValueDescriptionautofocusautofocus Specifies that when the page loads, the text area automatically gains focus. colsdisableddisabledSpecifies that the text area is disabled. formmaxlengthnameplaceholderreadonlyreadonlySpecifies that the text area is read-only. requiredrequiredSpecifies that the text area is required/required. rowswraphard

textarea文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

</body>
</html>

（学习视频分享：web前端）

number	Specifies the visible width within the text area.
form_id	Define one or more forms to which the text area belongs.
number	Specifies the maximum number of characters allowed in the text area.
text	Specifies the name of the text area.
text	Specifies a short hint describing the expected input value for the text area.
number	Specifies the number of visible rows in the text area.
soft	Specifies how the text in the text area should wrap when the form is submitted.

The above is the detailed content of What properties does the HTML/CSS text input box have?. For more information, please follow other related articles on the PHP Chinese website!